1
00:00:02,770 --> 00:00:07,410
Entonces, ¿qué tipo de aplicación construiremos en este módulo aquí?

2
00:00:07,450 --> 00:00:15,580
Crearemos una aplicación de comidas, una aplicación en la que podamos ver algunas recetas, algunas recetas favoritas y también recetas de filtro y

3
00:00:15,820 --> 00:00:19,370
para esto en esta aplicación, necesitaremos un poco de navegación.

4
00:00:19,390 --> 00:00:25,810
Tendremos nuestro encabezado allí con algún título en el medio y con un botón de menú aquí

5
00:00:25,810 --> 00:00:29,210
a la izquierda que nos permite abrir un cajón

6
00:00:29,470 --> 00:00:33,610
lateral al que volveré en un segundo y al final de

7
00:00:33,610 --> 00:00:42,700
esta página aquí, nosotros Tendremos pestañas, tendremos dos pestañas: una para todas las comidas, todas las recetas y otra para nuestros favoritos que, por

8
00:00:42,700 --> 00:00:45,310
supuesto, podremos agregar en esta aplicación.

9
00:00:45,310 --> 00:00:49,800
Ahora, en esa página, tendremos una cuadrícula de categorías,

10
00:00:49,810 --> 00:00:59,310
básicamente algo como comida italiana, exótica, tal vez alemana, básicamente diferentes categorías de alimentos y cuando tocamos una de

11
00:00:59,470 --> 00:01:02,100
estas categorías, se nos

12
00:01:02,200 --> 00:01:09,490
mostrará una segunda pantalla donde tendremos un botón de retroceso en la parte superior para

13
00:01:09,490 --> 00:01:13,660
volver con otro título, el título de categoría

14
00:01:13,660 --> 00:01:17,110
y en esa pantalla, tendremos las recetas.

15
00:01:17,110 --> 00:01:24,910
Entonces, tendremos varias tarjetas con una imagen, un título, información adicional sobre la receta, como cuánto tiempo

16
00:01:24,910 --> 00:01:29,250
lleva crearla, etc., así que cuando hacemos clic en el

17
00:01:29,260 --> 00:01:33,220
botón Atrás, por supuesto llevado de vuelta aquí.

18
00:01:33,250 --> 00:01:37,300
Ahora esa es una parte y ahí es donde estamos en la pestaña

19
00:01:37,300 --> 00:01:44,470
all alli, así que cuando esta es la pestaña activa. Sin embargo, ahora no hemos terminado con este flujo, por supuesto, podemos

20
00:01:44,890 --> 00:01:50,590
aprovechar una sola receta y eso nos llevará a otra página aquí donde podemos ver los detalles sobre esta receta.

21
00:01:50,650 --> 00:01:56,530
Entonces, donde también tenemos un encabezado y una imagen de esta receta y también tenemos un

22
00:01:56,530 --> 00:02:02,950
botón de retroceso que nos lleva de vuelta a esta página aquí, donde también tenemos más información

23
00:02:02,950 --> 00:02:11,740
sobre la receta, como por ejemplo los ingredientes que son una lista y luego también los pasos necesarios para crear esta receta, como cortar

24
00:02:11,800 --> 00:02:12,860
cebollas, etc.

25
00:02:13,390 --> 00:02:17,370
Esa es la información sobre la receta que tenemos aquí y podemos volver.

26
00:02:17,710 --> 00:02:26,050
Importante, también tendremos la funcionalidad para marcar una receta como favorita allí, por ejemplo, aquí en el encabezado, podríamos tener un icono

27
00:02:26,050 --> 00:02:31,710
de estrella que nos permita hacer eso, bueno, esa es una estrella fea, pero eso

28
00:02:31,720 --> 00:02:32,850
es algo

29
00:02:32,880 --> 00:02:39,790
que podríamos tener aquí para marcar una receta como favorita y la agregaremos a esta lista de favoritos porque

30
00:02:39,790 --> 00:02:43,210
esa es la otra pestaña que tenemos aquí, ¿verdad?

31
00:02:43,220 --> 00:02:50,980
Esa es la segunda pestaña que tenemos aquí. Cuando presionamos esta pestaña aquí, básicamente estamos cambiando la pestaña en

32
00:02:51,040 --> 00:02:53,540
esta pantalla de inicio donde tenemos

33
00:02:53,740 --> 00:02:58,500
ese botón de menú, todavía tenemos nuestras pestañas aquí con todos y con favoritos,

34
00:02:58,510 --> 00:03:01,750
pero ahora digamos que favoritos es la pestaña activa.

35
00:03:02,050 --> 00:03:10,660
Bueno, en este caso si favoritos es la pestaña activa, entonces aquí esencialmente vemos una lista de recetas

36
00:03:10,660 --> 00:03:15,700
que se parece a esta lista de recetas aquí cuando

37
00:03:15,700 --> 00:03:24,790
hacemos clic en una categoría pero ahora solo con una lista de recetas con las recetas que marcamos como favorito.

38
00:03:24,790 --> 00:03:30,890
Ahora todavía podemos tener una sola receta y nos llevan a la página de detalles de la receta allí arriba

39
00:03:30,970 --> 00:03:35,050
y si ahora presionáramos el botón Atrás, por supuesto, volveríamos a esta

40
00:03:35,080 --> 00:03:40,130
página, por lo que el botón Atrás nos lleva a diferentes páginas dependiendo de dónde venimos.

41
00:03:40,180 --> 00:03:47,980
Ahora, ¿qué sucede cuando presionamos ese cajón aquí, cuando tocamos este botón de menú? ¿Qué pasa en este

42
00:03:47,980 --> 00:03:49,110
caso?

43
00:03:49,120 --> 00:03:56,860
Bueno, en este caso, abrimos un cajón lateral que nos permite ir a la aplicación de comidas, que al final es esta aplicación en la

44
00:03:56,860 --> 00:04:05,830
que estamos comenzando, donde tenemos todos los favoritos y también la pantalla de filtros. Ahora filtros es una pantalla completamente nueva que

45
00:04:05,860 --> 00:04:12,730
tenemos en esta aplicación, donde también tenemos un botón de menú para ir al

46
00:04:12,850 --> 00:04:22,150
mismo menú aquí y posiblemente volver a la página de comidas y en los filtros, podemos configurar filtros como glutenFree

47
00:04:22,490 --> 00:04:30,740
o vegan y Tendremos algunos interruptores aquí que nos permiten activar y desactivar estas opciones y también

48
00:04:31,160 --> 00:04:38,690
tenemos un botón de guardar aquí en la parte superior que nos permite guardar nuestra selección

49
00:04:38,720 --> 00:04:48,430
y luego podemos volver y las recetas que vemos aquí serán filtrado por nuestra selección en la pantalla de filtro.

50
00:04:49,070 --> 00:04:54,270
Así que esta es la aplicación que estamos creando y ahora este boceto aquí muestra dos cosas: por

51
00:04:54,290 --> 00:05:00,500
un lado, mis habilidades de dibujo no son tan impresionantes. Sin embargo, no debería importar demasiado porque afortunadamente no

52
00:05:00,590 --> 00:05:02,360
es una clase de dibujo.

53
00:05:02,390 --> 00:05:07,330
Lo más importante que muestra este boceto es que tendremos mucha navegación, tenemos pestañas, tenemos un

54
00:05:07,370 --> 00:05:08,170
cajón lateral

55
00:05:08,180 --> 00:05:15,760
y tenemos navegación hacia adelante y hacia atrás, así que iremos de un lado a otro entre las páginas, tendremos para cambiar el título en

56
00:05:15,800 --> 00:05:21,080
el encabezado en función de a dónde vamos, tendremos que cambiar el contenido en la pantalla en

57
00:05:21,080 --> 00:05:26,510
función de a dónde vamos y, por lo tanto, necesitamos una solución de navegación poderosa donde no solo

58
00:05:26,510 --> 00:05:33,200
usemos si comprueba como lo hicimos hasta ahora en el curso. No solo porque sería muy engorroso de

59
00:05:33,200 --> 00:05:39,800
escribir, sino también porque queremos estas hermosas animaciones, estas transiciones entre pantallas y eso es algo

60
00:05:40,250 --> 00:05:44,220
que afortunadamente podemos agregar de una manera relativamente fácil.