1
00:00:02,150 --> 00:00:09,140
Entonces, comencemos con la implementación de la autenticación y un paso muy importante para eso es que agreguemos una nueva pantalla,

2
00:00:09,140 --> 00:00:16,370
la pantalla de autenticación, que es la pantalla que debe presentar un formulario de inicio de sesión o registro que el usuario

3
00:00:16,370 --> 00:00:19,910
puede usar para iniciar sesión o registrarse y, por lo

4
00:00:20,130 --> 00:00:24,080
tanto, aquí en la pantalla de autenticación, importaré reaccionar desde reaccionar

5
00:00:24,260 --> 00:00:31,070
y también importaré algunas cosas desde React Native porque desde allí, desde React Native, quiero tener la vista de desplazamiento

6
00:00:31,070 --> 00:00:36,740
porque crearemos un formulario y quiero asegúrese de que los usuarios de todos los tamaños de dispositivo

7
00:00:36,740 --> 00:00:38,420
puedan interactuar con él.

8
00:00:38,480 --> 00:00:42,290
Agregaré una hoja de estilo aquí y eso debería ser todo por ahora,

9
00:00:42,290 --> 00:00:44,690
siempre podemos agregar más si necesitamos más.

10
00:00:44,960 --> 00:00:50,990
También podemos incluir una vista y el teclado evitando la vista, supongo que para asegurarnos de que todas

11
00:00:51,050 --> 00:00:52,970
las entradas estén siempre accesibles.

12
00:00:52,970 --> 00:00:58,160
Ahora hablando de entradas, por supuesto, agregaremos un formulario y, por lo tanto, reutilizaré el componente de entrada que creamos en

13
00:00:58,160 --> 00:01:02,630
la sección de formularios que puedo encontrar en la carpeta de la interfaz de usuario de componentes.

14
00:01:02,720 --> 00:01:07,670
Así que asegúrese de mirar esta sección para saber qué hace este componente y cómo podemos

15
00:01:07,670 --> 00:01:09,620
administrar un formulario con él.

16
00:01:09,620 --> 00:01:17,650
Con eso, podemos crear el componente de pantalla de autenticación aquí que recibe accesorios y también podemos crear ese objeto

17
00:01:17,650 --> 00:01:22,140
de estilos con la hoja de estilos, el método de

18
00:01:22,150 --> 00:01:27,510
creación allí y, por supuesto, exportar la pantalla de autenticación, de esta manera.

19
00:01:27,540 --> 00:01:33,150
Ahora, obviamente, la pregunta ahora también es, ¿cómo presentamos esta pantalla de autenticación? ¿Cómo nos aseguramos de ver esto

20
00:01:33,150 --> 00:01:35,520
si no hemos iniciado sesión?

21
00:01:35,520 --> 00:01:40,620
Ahora, eso es algo que refinaremos a lo largo de este módulo, pero para comenzar, podemos ir al

22
00:01:40,620 --> 00:01:46,200
navegador y asegurarnos de que cuando se inicie la aplicación, veamos esa pantalla de autenticación y para esto podemos usar

23
00:01:46,200 --> 00:01:51,930
un nuevo navegador especial que no tenemos utilizado antes de lo cual está específicamente diseñado, casi podría decirse para este

24
00:01:51,930 --> 00:01:56,950
caso de uso de autenticación y que la función de crear navegador de conmutador que nos ayuda

25
00:01:56,970 --> 00:02:02,550
allí, por lo que crea dicho navegador de conmutador. Lo especial de este navegador es que siempre

26
00:02:02,550 --> 00:02:08,160
muestra exactamente una pantalla y no puede volver a otra pantalla si luego navega a una diferente.

27
00:02:08,160 --> 00:02:13,710
Por lo tanto, retroceder no está explícitamente permitido, que es exactamente lo que queremos porque no debería poder

28
00:02:13,890 --> 00:02:18,040
volver a la pantalla de inicio de sesión si acaba de iniciar sesión.

29
00:02:18,090 --> 00:02:24,750
Por lo tanto, aquí, en la parte inferior del archivo, crearé un nuevo navegador, tal vez mi navegador principal,

30
00:02:24,750 --> 00:02:31,770
el nombre depende totalmente de usted, por supuesto, con el interruptor de creación del navegador y, como antes, este navegador toma

31
00:02:31,920 --> 00:02:38,670
un argumento donde configuramos así que, un objeto donde lo configuramos y allí, quiero vincular mi pantalla de autenticación y,

32
00:02:38,880 --> 00:02:46,260
por supuesto, mi pila de tienda a partir de entonces. Ahora, para tener un buen encabezado, también crearé

33
00:02:46,260 --> 00:02:55,560
mi navegador de autenticación aquí, que es un navegador de pila creado con el navegador Crear pila y allí, simplemente mapearé la pantalla

34
00:02:55,560 --> 00:03:00,430
de autenticación en la que acabo de comenzar a trabajar y para

35
00:03:00,450 --> 00:03:09,210
esto, por supuesto, necesita importarlo, así que en ese ShopNavigator. js, podemos importar la pantalla de autenticación de la pantalla de autenticación del

36
00:03:09,210 --> 00:03:10,060
usuario de

37
00:03:10,180 --> 00:03:16,880
esta manera y con esa importación agregada, si bajamos, asignamos esto aquí a la autenticación en el navegador de autenticación y

38
00:03:16,880 --> 00:03:23,640
el navegador de autenticación se asigna a la autenticación aquí en el navegador del interruptor y Por supuesto, la tienda está

39
00:03:23,640 --> 00:03:28,770
asignada al navegador de la tienda y ahora es el navegador principal que envolvemos con el

40
00:03:28,770 --> 00:03:34,110
contenedor de creación de aplicaciones y, por lo tanto, si guardamos esto, representaremos la pantalla de autenticación

41
00:03:34,140 --> 00:03:35,820
como la primera pantalla

42
00:03:36,060 --> 00:03:43,980
que en este momento no mostrará ninguna válida jsx, por lo que obtenemos un error, pero podemos trabajar en eso, por supuesto, porque el objetivo

43
00:03:43,980 --> 00:03:53,880
ahora es mostrar esta pantalla de autenticación donde podamos iniciar sesión y hacer lo nuestro. Así que aquí, quiero presentar estas entradas y en realidad también importaré

44
00:03:53,880 --> 00:04:02,750
el componente de la tarjeta desde la tarjeta UI de componentes para que esta bonita tarjeta se vea aquí y tenga mis entradas

45
00:04:02,750 --> 00:04:07,400
allí y, por supuesto, esto es totalmente opcional, pero aquí,

46
00:04:07,400 --> 00:04:14,030
agregaré aquí, agregaré la tarjeta y en la tarjeta, podemos agregar la vista de desplazamiento para poder

47
00:04:14,030 --> 00:04:19,100
desplazarnos dentro de esa tarjeta, por supuesto, también puede agregar la vista de

48
00:04:19,100 --> 00:04:27,650
desplazamiento alrededor de la tarjeta para que pueda desplazarse en el pantalla pero lo haré así, también agregaré mi propio estilo

49
00:04:27,650 --> 00:04:36,540
aquí a la tarjeta que nombraré contenedor de autenticación tal vez, el nombre depende totalmente de usted y también envolveré una vista de

50
00:04:36,540 --> 00:04:46,880
todo eso aquí como envoltura ver donde agregaré un estilo que nombraré pantalla. En realidad, aquí ya podemos usar el teclado para evitar la vista, supongo que con

51
00:04:46,940 --> 00:04:56,730
un comportamiento de relleno y luego este desplazamiento vertical del teclado desactivado, digamos 50. Así que ahora dentro de esa vista de desplazamiento

52
00:04:56,730 --> 00:05:04,720
aquí que tenemos en nuestra tarjeta, podemos comenzar a agregar las entradas, la entrada personalizada

53
00:05:04,720 --> 00:05:11,590
que construimos anteriormente en el curso. Por ejemplo, aquí, una entrada con el correo electrónico de identificación y

54
00:05:11,590 --> 00:05:19,780
una etiqueta de correo electrónico porque allí quiero obtener la dirección de correo electrónico del usuario y, por lo tanto, el tipo de dirección de correo electrónico del teclado

55
00:05:19,810 --> 00:05:22,750
que es compatible tanto en iOS como en Android.

56
00:05:22,750 --> 00:05:28,980
También debería ser necesario y quiero usar el validador de correo electrónico, estas son dos de las

57
00:05:28,990 --> 00:05:36,540
funcionalidades de validación que incorporé a la entrada anteriormente en este curso, también se debe desactivar el uso de mayúsculas

58
00:05:36,540 --> 00:05:42,630
automáticas, así que no lo pondré en mayúsculas porque la dirección de correo electrónico realmente

59
00:05:42,630 --> 00:05:52,190
no es útil y el mensaje de error que quiero mostrar si tenemos algo mal allí es ingresar una dirección de correo electrónico válida, algo así.

60
00:05:53,210 --> 00:05:58,670
Ahora, cuando el valor cambia, así que al cambiar el valor, queremos hacer algo, pero por

61
00:05:58,670 --> 00:06:04,790
ahora no haré nada aquí, solo proporcionaré una función vacía para que no obtengamos un error y el valor

62
00:06:04,790 --> 00:06:08,260
inicial que quiero mostrar. aquí, bueno, eso es solo

63
00:06:08,270 --> 00:06:12,530
una cadena vacía al final porque no quiero proporcionar ningún otro valor inicial.

64
00:06:12,530 --> 00:06:17,420
Ahora, por supuesto, no es la única entrada, así que repetiré esto porque también necesito

65
00:06:17,900 --> 00:06:26,810
una entrada de contraseña aquí con una etiqueta de contraseña y el tipo de teclado aquí debería ser predeterminado porque quiero tener la palabra clave de texto normal

66
00:06:26,810 --> 00:06:27,500
pero

67
00:06:27,500 --> 00:06:31,490
quiero oscurezca la entrada para que no podamos verla y eso se

68
00:06:31,490 --> 00:06:34,630
puede hacer agregando a la entrada de texto segura aquí.

69
00:06:34,640 --> 00:06:38,250
Por supuesto, este no es un accesorio compatible con mi componente personalizado, pero

70
00:06:38,330 --> 00:06:44,000
tenga en cuenta que en este componente, reenviamos todos los accesorios a la entrada de texto incorporada y la entrada de

71
00:06:44,000 --> 00:06:48,710
texto integrada admite esta propiedad de entrada de texto segura aquí, así que es por eso que

72
00:06:48,710 --> 00:06:51,050
puede configurar esto. Aquí la validación

73
00:06:51,100 --> 00:06:55,370
tampoco debería verificar que se trata de una dirección de correo electrónico, pero

74
00:06:55,370 --> 00:07:02,450
asegúrese de que tengamos una longitud mínima de, digamos, cinco caracteres. La capitalización automática también se puede desactivar aquí, el mensaje de

75
00:07:02,450 --> 00:07:08,660
error sería ingresar una contraseña válida y con eso, acabo de ver que aquí, por supuesto, tengo un error tipográfico,

76
00:07:08,660 --> 00:07:14,510
que debería ser una dirección de correo electrónico, aquí una contraseña y la dejaré aquí como están las cosas.

77
00:07:17,440 --> 00:07:19,650
Ahora para poder enviar esto,

78
00:07:19,660 --> 00:07:29,020
también necesito un botón, así que aquí importaré el botón de React Native y agregaré dos botones en la tarjeta y, por

79
00:07:29,020 --> 00:07:29,790
lo

80
00:07:31,000 --> 00:07:38,370
tanto, también dentro de la vista de desplazamiento. El primer botón tiene un título de inicio

81
00:07:38,370 --> 00:07:44,940
de sesión, digamos, y luego lo cambiaremos para iniciar sesión o registrarse dependiendo del modo en

82
00:07:44,940 --> 00:07:52,570
que nos encontremos y el color se importe o se agregue con la ayuda de los colores constantes

83
00:07:52,670 --> 00:08:01,190
que debe Importar y en estos colores constantes, utilizaré colores. primario y onPress en este momento simplemente pueden apuntar a una función

84
00:08:01,190 --> 00:08:06,320
vacía y repetiré esto porque quiero tener un segundo botón donde digo cambiar para

85
00:08:06,320 --> 00:08:13,550
registrarse y, por supuesto, esto también luego indicará cambiar para iniciar sesión si estamos en señal arriba y tal vez

86
00:08:13,550 --> 00:08:18,720
podamos usar nuestro color de acento. Si ahora guardamos eso, deberíamos tener una pantalla de

87
00:08:18,720 --> 00:08:21,870
inicio de sesión básica, aquí está, no se ve como debería

88
00:08:21,930 --> 00:08:23,580
verse, pero tenemos nuestras entradas

89
00:08:23,970 --> 00:08:26,970
aquí, tenemos estos dos botones, también en Android una vez que

90
00:08:26,970 --> 00:08:28,040
esto se carga,

91
00:08:28,180 --> 00:08:31,360
aquí vamos y ahora, por supuesto, me gustaría diseñar esto apropiadamente.

92
00:08:31,380 --> 00:08:33,570
Así que vamos a la hoja

93
00:08:33,570 --> 00:08:40,550
de estilo y tenga en cuenta que tengo dos estilos al final asignados: pantalla y contenedor de autenticación, así que aquí en los

94
00:08:40,550 --> 00:08:43,920
estilos que quiero agregar tanto la pantalla como el contenedor de

95
00:08:43,920 --> 00:08:50,390
autenticación, estos son los dos estilos con los que planeo trabajar. Ahora para la pantalla, estableceré flex en uno

96
00:08:50,390 --> 00:08:57,050
y luego justificaré mi contenido en el centro y alinearé los elementos en el centro para centrarlos tanto

97
00:08:57,110 --> 00:08:58,730
en el eje

98
00:08:59,120 --> 00:09:04,090
vertical como en el horizontal y en el contenedor de autenticación, quiero establecer

99
00:09:04,100 --> 00:09:10,100
un ancho digamos 80% para no tomar el ancho completo disponible y un ancho máximo en

100
00:09:10,100 --> 00:09:22,710
realidad de 400 píxeles en caso de que 80% sea más que eso, lo restringimos a 400 píxeles y tal vez una altura de digamos 50% pero una altura máxima de También 400.

101
00:09:22,800 --> 00:09:24,150
Veamos cómo se ve eso. Si

102
00:09:24,150 --> 00:09:25,950
guardamos esto, esto es lo

103
00:09:26,000 --> 00:09:27,230
que obtengo aquí.

104
00:09:27,230 --> 00:09:32,960
Ahora puedo desplazarme allí porque configuré dicha vista de desplazamiento y, de hecho, ese no es el comportamiento

105
00:09:32,960 --> 00:09:33,910
que quiero.

106
00:09:34,160 --> 00:09:35,570
No estableceré una altura

107
00:09:35,570 --> 00:09:39,620
aquí, solo agregaré una altura máxima para que esté limitada a una altura

108
00:09:39,620 --> 00:09:44,500
determinada, pero de manera predeterminada solo toma la altura necesaria y, por lo tanto, prefiero agregar

109
00:09:44,540 --> 00:09:49,820
algo de relleno para que tengamos algo espacio alrededor de las entradas y no se sienta en

110
00:09:49,820 --> 00:09:50,440
el

111
00:09:50,450 --> 00:09:56,420
borde de la tarjeta, por lo que se ve mucho mejor y veamos cómo se ve eso en Android, sí,

112
00:09:56,440 --> 00:09:57,870
en general se ve bien.

113
00:09:58,690 --> 00:10:00,730
Si toco allí, esto también se desplaza

114
00:10:00,730 --> 00:10:06,860
hacia arriba, por lo que el teclado que evita la vista está haciendo su trabajo, pero por supuesto, todavía recibo un error aquí

115
00:10:07,040 --> 00:10:11,190
que al cambiar la entrada está causando un error porque sí, agregué un cambio de

116
00:10:11,200 --> 00:10:15,070
valor aquí, eso debería ser en cambio de entrada, no en cambio de valor.

117
00:10:15,070 --> 00:10:18,370
Eso es una pequeña solución, pero nos dirigimos en la dirección correcta.

118
00:10:18,430 --> 00:10:20,740
Sin embargo, ahora no he terminado, quiero tener un

119
00:10:20,740 --> 00:10:24,950
título de encabezado y qué tal un poco de color de fondo aquí, eso también sería bueno probablemente.

120
00:10:25,080 --> 00:10:32,680
Entonces, para eso, con respecto al título del encabezado, por supuesto, podemos agregar AuthScreen. navigationOptions y trabajar con algunas opciones estáticas

121
00:10:32,680 --> 00:10:39,070
por ahora porque solo quiero agregar un título de encabezado aquí y configurar

122
00:10:41,480 --> 00:10:46,700
esto para autenticar o simplemente autenticar, algo así y para el

123
00:10:46,700 --> 00:10:48,090
fondo, bueno,

124
00:10:48,110 --> 00:10:53,680
por supuesto, podríamos dar nuestra opinión aquí que contiene todo un color

125
00:10:54,380 --> 00:11:01,280
de fondo, pero en realidad quiero mostrarle un nuevo componente que no hemos usado hasta

126
00:11:01,280 --> 00:11:09,480
ahora y para esto, necesitamos instalar un paquete nuevo y ese es el paquete expo-lineal-gradiente que instaló

127
00:11:09,480 --> 00:11:12,480
con npm install --save gradiente expo-lineal.

128
00:11:12,510 --> 00:11:16,190
Este es un paquete que nos permite agregar un

129
00:11:16,200 --> 00:11:18,270
gradiente lineal con facilidad,

130
00:11:18,570 --> 00:11:25,080
por lo que de una manera muy simple y después de que se haya instalado,

131
00:11:25,800 --> 00:11:32,760
solo necesita importar desde expo-linear-gradient e importar un componente que esto expone, el componente de gradiente lineal

132
00:11:32,770 --> 00:11:39,730
Ahora, ese es un componente que puede usar en su página y aquí lo usaré dentro del teclado evitando

133
00:11:39,730 --> 00:11:47,770
la vista, un degradado lineal como este y envolviendo todo el otro contenido como este aquí y ahora puede configurar eso

134
00:11:47,770 --> 00:11:48,600
y

135
00:11:49,240 --> 00:11:56,060
allá, yo queremos asegurarnos de que esto tenga una tecla de colores que nos permita establecer los colores

136
00:11:56,200 --> 00:12:02,080
entre los cuales debería hacer la transición porque un gradiente es simplemente un gradiente entre

137
00:12:02,080 --> 00:12:08,040
varios colores, al menos dos, pero puede agregar más y ahora puede agregar colores, como

138
00:12:08,230 --> 00:12:16,510
rojo o agregando los códigos hexadecimales y quiero hacer la transición entre #ffedff y digamos otro código hexadecimal, # ffe3ff y, por

139
00:12:16,510 --> 00:12:19,020
supuesto, puede experimentar con diferentes colores aquí.

140
00:12:19,030 --> 00:12:26,860
Ahora también necesitamos agregar un estilo aquí y nombraré este gradiente de estilos que ahora podemos agregar aquí y este

141
00:12:28,330 --> 00:12:36,040
gradiente tendrá un ancho de 100% y una altura de 100%, por lo que tomará todo el ancho y alto

142
00:12:36,040 --> 00:12:40,560
puede obtener, así es como se ve, pero ahora tenemos un problema,

143
00:12:40,560 --> 00:12:41,890
por supuesto, nuestro

144
00:12:41,940 --> 00:12:46,300
contenido ya no está centrado. Para garantizar que este sea

145
00:12:46,440 --> 00:12:52,410
el caso, ahora necesitamos agregar contenido justificado y alinear elementos nuevamente y, por lo tanto,

146
00:12:52,410 --> 00:12:53,010
aquí

147
00:12:53,010 --> 00:12:55,880
en la pantalla circundante, podemos deshacernos de eso.

148
00:12:55,960 --> 00:12:57,490
Ahora tenemos el mismo aspecto que antes,

149
00:12:57,820 --> 00:13:01,930
obviamente, por lo tanto, también podemos lograr esto no configurando el ancho y la altura, sino simplemente flexionando uno.

150
00:13:02,200 --> 00:13:07,210
Así que ahora con esta configuración aquí y es importante que la pantalla no intente centrarse porque

151
00:13:07,210 --> 00:13:08,610
de lo contrario el

152
00:13:08,620 --> 00:13:15,510
gradiente estará centrado, pero con esta configuración, ahora tenemos este aspecto con este agradable gradiente y para ver el título de nuestro encabezado

153
00:13:15,510 --> 00:13:21,960
aquí, simplemente debemos asegurarnos de que en la configuración de navegación, en el navegador de la tienda, asignemos nuestros accesorios de

154
00:13:21,960 --> 00:13:23,850
navegación predeterminados al navegador de autenticación.

155
00:13:23,970 --> 00:13:29,670
Así que agregaré el segundo argumento para crear el navegador de pila y las opciones de navegación predeterminadas solo apuntan a

156
00:13:29,670 --> 00:13:34,980
las opciones de navegación predeterminadas que configuran el color del encabezado, el color del título del encabezado, etc.

157
00:13:39,730 --> 00:13:45,190
Por supuesto, asegúrese de que no tiene ningún error tipográfico aquí en las opciones de navegación de la pantalla de autenticación en la

158
00:13:45,190 --> 00:13:46,480
pantalla de autenticación como yo.

159
00:13:46,480 --> 00:13:50,950
Entonces, con eso arreglado, esta es la configuración que tenemos aquí, por supuesto,

160
00:13:50,950 --> 00:13:54,830
puedes experimentar con los colores y usar diferentes colores si lo

161
00:13:55,060 --> 00:14:01,480
prefieres, estoy contento con eso y ahora lo único que quiero arreglar aquí es mi estilo para los botones,

162
00:14:01,480 --> 00:14:09,650
algunos espacios alrededor de ellos serían agradables y eso se puede agregar fácilmente envolviendo los botones en las vistas aquí, ambos botones en realidad.

163
00:14:12,500 --> 00:14:22,640
Así que haré esto aquí y ahora le doy a cada vista un estilo aquí, tal vez un contenedor de botones de estilos, haga esto en la primera vista y en la segunda vista y

164
00:14:22,760 --> 00:14:24,980
ahora podemos darle un estilo a ese contenedor

165
00:14:24,980 --> 00:14:29,500
de botones allí abajo en la hoja de estilos y aquí puede establecer un margen

166
00:14:29,750 --> 00:14:35,930
superior, por ejemplo, de 10 para asegurarse de que cada botón tenga un pequeño margen en la parte superior para que

167
00:14:35,930 --> 00:14:40,760
los botones no se sienten directamente uno al lado del otro, lo que creo que realmente ayudaría

168
00:14:40,790 --> 00:14:41,900
a nuestros botones.

169
00:14:41,900 --> 00:14:43,350
Así que esto se ve

170
00:14:43,340 --> 00:14:45,280
bien en iOS, también vamos a verlo en Android,

171
00:14:45,290 --> 00:14:46,910
sí, esto no se ve tan mal.

172
00:14:47,810 --> 00:14:53,090
Entonces, con eso, tenemos esa configuración básica, ahora asegurémonos de que esto también haga algo útil y que

173
00:14:53,090 --> 00:14:55,160
realmente intentemos iniciar sesión con eso.