1
00:00:02,150 --> 00:00:09,140
Então, vamos começar a implementar a autenticação e um passo muito importante para isso é que adicionamos uma nova

2
00:00:09,140 --> 00:00:16,370
tela, a tela de autenticação, que deve apresentar um formulário de login ou inscrição que o usuário pode usar para

3
00:00:16,370 --> 00:00:19,910
fazer login ou inscrição e, portanto, aqui na tela

4
00:00:20,130 --> 00:00:24,080
de autenticação, importarei o react from react e também importarei algumas

5
00:00:24,260 --> 00:00:31,070
coisas do React Native porque, a partir daí, do React Native, quero ter a visualização de rolagem, porque

6
00:00:31,070 --> 00:00:36,740
criaremos um formulário e quero verifique se os usuários de todos os tamanhos de dispositivo

7
00:00:36,740 --> 00:00:38,420
podem interagir com ele.

8
00:00:38,480 --> 00:00:42,290
Vou adicionar uma folha de estilo aqui e deve ser por enquanto, sempre

9
00:00:42,290 --> 00:00:44,690
podemos adicionar mais se precisarmos de mais.

10
00:00:44,960 --> 00:00:50,990
Também podemos incluir uma visualização e o teclado evitando a visualização, para garantir que todas as

11
00:00:51,050 --> 00:00:52,970
entradas estejam sempre acessíveis.

12
00:00:52,970 --> 00:00:58,160
Agora, falando em entradas, é claro que adicionaremos um formulário e, portanto, reutilizarei o componente de entrada que construímos

13
00:00:58,160 --> 00:01:02,630
na seção de formulários que posso encontrar na pasta da interface do usuário dos componentes.

14
00:01:02,720 --> 00:01:07,670
Portanto, verifique esta seção para saber o que esse componente faz e como podemos

15
00:01:07,670 --> 00:01:09,620
gerenciar um formulário com ele.

16
00:01:09,620 --> 00:01:17,650
Com isso, podemos criar o componente de tela de autenticação aqui, que recebe objetos e também podemos criar esse

17
00:01:17,650 --> 00:01:22,140
objeto de estilos com a folha de estilo, o método

18
00:01:22,150 --> 00:01:27,510
de criação ali e, é claro, exportar a tela de autenticação, assim.

19
00:01:27,540 --> 00:01:33,150
Agora, obviamente, a pergunta agora também é: como apresentamos essa tela de autenticação? Como podemos garantir que vemos isso

20
00:01:33,150 --> 00:01:35,520
se não estivermos logados?

21
00:01:35,520 --> 00:01:40,620
Agora isso é algo que refinaremos ao longo deste módulo, mas, para começar, podemos acessar o

22
00:01:40,620 --> 00:01:46,200
navegador e garantir que, quando o aplicativo for iniciado, vejamos a tela de autenticação e, para isso, possamos

23
00:01:46,200 --> 00:01:51,930
usar um novo navegador especial que não temos. usado antes do qual foi desenvolvido especificamente, você quase poderia dizer

24
00:01:51,930 --> 00:01:56,950
para este caso de uso de autenticação e que a função create navigator do switch que

25
00:01:56,970 --> 00:02:02,550
nos ajuda a criar um navegador de switch. O aspecto especial desse navegador é que ele

26
00:02:02,550 --> 00:02:08,160
sempre exibe exatamente uma tela e você não pode voltar para outra tela se navegar para outra tela.

27
00:02:08,160 --> 00:02:13,710
Portanto, não é permitido voltar explicitamente, o que é exatamente o que queremos, porque você não poderá

28
00:02:13,890 --> 00:02:18,040
voltar à tela de login se tiver feito apenas o login.

29
00:02:18,090 --> 00:02:24,750
Portanto, aqui na parte inferior do arquivo, criarei um novo navegador, talvez meu navegador principal, o

30
00:02:24,750 --> 00:02:31,770
nome é totalmente seu, é claro, com create switch navigator e, como antes, esse navegador usa um argumento

31
00:02:31,920 --> 00:02:38,670
onde configuramos então, como um objeto em que o configuramos e lá, quero vincular minha tela de

32
00:02:38,880 --> 00:02:46,260
autenticação e, claro, minha pilha de lojas posteriormente. Agora, para ter um bom cabeçalho, também criarei

33
00:02:46,260 --> 00:02:55,560
meu navegador de autenticação aqui, que é um navegador de pilha criado com o navegador de pilha de criação e, lá,

34
00:02:55,560 --> 00:03:00,430
vou apenas mapear a tela de autenticação na qual comecei a

35
00:03:00,450 --> 00:03:09,210
trabalhar e, é claro, nós precisa importá-lo, então nesse ShopNavigator. js, podemos importar a tela de autenticação da tela de autenticação do

36
00:03:09,210 --> 00:03:10,060
usuário como

37
00:03:10,180 --> 00:03:16,880
esta e, com essa importação adicionada, se descermos, mapeamos isso aqui para autenticação no navegador de autenticação e o

38
00:03:16,880 --> 00:03:23,640
navegador de autenticação é mapeado para autenticação aqui no navegador de comutador e é claro que o shop está

39
00:03:23,640 --> 00:03:28,770
mapeado para o navegador da loja e agora é o navegador principal que envolvemos

40
00:03:28,770 --> 00:03:34,110
com o container de aplicativo para criação e, portanto, se salvarmos isso, renderizaremos a tela

41
00:03:34,140 --> 00:03:35,820
de autenticação como a

42
00:03:36,060 --> 00:03:43,980
primeira tela que no momento não renderá nenhum válido jsx, obtemos um erro, mas podemos trabalhar nisso, é claro, porque o objetivo agora

43
00:03:43,980 --> 00:03:53,880
é renderizar essa tela de autenticação onde podemos fazer login e executar nossas tarefas. Então, aqui, quero apresentar essas entradas e, na verdade, também importarei o

44
00:03:53,880 --> 00:04:02,750
componente do cartão dos componentes da placa de interface do usuário para que este belo cartão seja exibido aqui e tenha minhas entradas

45
00:04:02,750 --> 00:04:07,400
lá e, é claro, isso é totalmente opcional, mas aqui vou

46
00:04:07,400 --> 00:04:14,030
adicionar aqui, vou adicionar o cartão e no cartão, podemos adicionar a visualização de rolagem para que

47
00:04:14,030 --> 00:04:19,100
possamos rolar dentro desse cartão, é claro que você também pode adicionar a

48
00:04:19,100 --> 00:04:27,650
visualização de rolagem ao redor do cartão para poder rolar a tela geral tela, mas eu farei assim, também adicionarei meu próprio

49
00:04:27,650 --> 00:04:36,540
estilo aqui ao cartão, que nomeei como container de autenticação, talvez o nome seja totalmente de sua responsabilidade e também mostrarei tudo isso

50
00:04:36,540 --> 00:04:46,880
aqui como um invólucro ver onde vou adicionar um estilo que vou nomear tela. Na verdade, aqui já podemos usar o teclado evitando a visualização, acho que com um

51
00:04:46,940 --> 00:04:56,730
comportamento de preenchimento e, em seguida, esse deslocamento vertical do teclado, digamos 50. Portanto, agora, dentro da visualização de rolagem aqui

52
00:04:56,730 --> 00:05:04,720
que temos em nossa placa, podemos começar a adicionar as entradas, a entrada personalizada

53
00:05:04,720 --> 00:05:11,590
que construímos anteriormente no curso. Por exemplo, aqui, uma entrada com o email de identificação

54
00:05:11,590 --> 00:05:19,780
e um rótulo de email, pois desejo buscar o endereço de email do usuário e, portanto, o tipo de teclado do endereço

55
00:05:19,810 --> 00:05:22,750
de email compatível com iOS e Android.

56
00:05:22,750 --> 00:05:28,980
Também deve ser necessário e eu quero usar o validador de e-mail, essas são

57
00:05:28,990 --> 00:05:36,540
duas das funcionalidades de validação que eu construí na entrada anteriormente neste curso, também as maiúsculas

58
00:05:36,540 --> 00:05:42,630
automáticas devem ser desativadas. o endereço de e-mail não é realmente útil

59
00:05:42,630 --> 00:05:52,190
e a mensagem de erro que eu quero mostrar se houver algo errado, digite um endereço de e-mail válido, algo assim.

60
00:05:53,210 --> 00:05:58,670
Agora, quando o valor muda, então, sobre alteração de valor, queremos fazer alguma coisa, mas por

61
00:05:58,670 --> 00:06:04,790
enquanto não farei nada aqui, apenas forneça uma função vazia para não recebermos um erro e o valor inicial

62
00:06:04,790 --> 00:06:08,260
que quero mostrar aqui, bem, isso é apenas uma

63
00:06:08,270 --> 00:06:12,530
string vazia no final, porque eu não quero fornecer nenhum outro valor inicial.

64
00:06:12,530 --> 00:06:17,420
Agora, é claro, essa não é a única entrada, então repetirei isso porque também preciso

65
00:06:17,900 --> 00:06:26,810
de uma entrada de senha aqui com um rótulo de senha e o tipo de teclado aqui deve ser o padrão, porque quero ter a palavra-chave de texto

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

67
00:06:27,500 --> 00:06:31,490
mas quero obscurece a entrada para que não possamos vê-la e isso

68
00:06:31,490 --> 00:06:34,630
pode ser feito adicionando aqui a entrada de texto segura.

69
00:06:34,640 --> 00:06:38,250
Obviamente, isso não é um suporte suportado pelo meu componente personalizado, mas lembre-se

70
00:06:38,330 --> 00:06:44,000
de que, nesse componente, encaminhamos todos os acessórios para a entrada de texto incorporada e a entrada de texto incorporada

71
00:06:44,000 --> 00:06:48,710
oferece suporte a essa propriedade segura de entrada de texto aqui; é por isso que eu

72
00:06:48,710 --> 00:06:51,050
pode definir isso. Aqui a validação

73
00:06:51,100 --> 00:06:55,370
também não deve verificar se esse é um endereço de email, mas

74
00:06:55,370 --> 00:07:02,450
verifique se temos um comprimento mínimo de, digamos, cinco caracteres. A capitalização automática também pode ser desativada aqui, a mensagem de

75
00:07:02,450 --> 00:07:08,660
erro seria digitar uma senha válida e, com isso, acabei de ver que aqui é claro que tenho um erro

76
00:07:08,660 --> 00:07:14,510
de digitação, que deve ser o endereço de e-mail, a senha aqui e deixarei isso aqui como isso é.

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

78
00:07:19,660 --> 00:07:29,020
isso, também preciso de um botão, então aqui importarei o botão do React Native e adicionarei dois botões no

79
00:07:29,020 --> 00:07:29,790
cartão

80
00:07:31,000 --> 00:07:38,370
e, portanto, também dentro da visualização de rolagem. O primeiro botão tem um título de

81
00:07:38,370 --> 00:07:44,940
login, digamos, e depois mudaremos para login ou inscrição, dependendo do modo em que

82
00:07:44,940 --> 00:07:52,570
estamos e a cor é importada ou adicionada com a ajuda das cores constantes que você

83
00:07:52,670 --> 00:08:01,190
deve importar e nessas cores constantes, vou usar cores. primary e onPress no momento podem simplesmente apontar para uma função

84
00:08:01,190 --> 00:08:06,320
vazia e repetirei isso porque quero um segundo botão onde digito alterne para se

85
00:08:06,320 --> 00:08:13,550
inscrever e, é claro, isso também dirá posteriormente para alternar para fazer login se estivermos logados modo up e talvez

86
00:08:13,550 --> 00:08:18,720
possamos usar nossa cor de destaque. Se agora salvarmos isso, devemos ter uma tela de

87
00:08:18,720 --> 00:08:21,870
login básica, aqui está, não parece com a aparência, mas temos

88
00:08:21,930 --> 00:08:23,580
nossas entradas aqui, temos esses

89
00:08:23,970 --> 00:08:26,970
dois botões, também no Android, uma vez que isso é feito,

90
00:08:26,970 --> 00:08:28,040
aqui nós vamos

91
00:08:28,180 --> 00:08:31,360
e agora é claro que eu gostaria de estilizar isso apropriadamente.

92
00:08:31,380 --> 00:08:33,570
Então, vamos para a folha

93
00:08:33,570 --> 00:08:40,550
de estilo e observe que eu tenho dois estilos no final atribuídos - screen e auth container, então aqui nos

94
00:08:40,550 --> 00:08:43,920
estilos que eu quero adicionar screen e auth container, esses

95
00:08:43,920 --> 00:08:50,390
são os dois estilos com os quais planejo trabalhar. Agora, para a tela, definirei flex como

96
00:08:50,390 --> 00:08:57,050
um e justificarei meu conteúdo no centro e alinharei os itens no centro para que fiquem

97
00:08:57,110 --> 00:08:58,730
centralizados no eixo

98
00:08:59,120 --> 00:09:04,090
vertical e horizontal e no contêiner de autenticação. Quero definir uma

99
00:09:04,100 --> 00:09:10,100
largura digamos 80% para não usar a largura total disponível e uma largura máxima,

100
00:09:10,100 --> 00:09:22,710
na verdade, de 400 pixels, caso 80% seja mais do que isso, restringimos a 400 pixels e talvez uma altura de, digamos, 50%, mas uma altura máxima de também 400.

101
00:09:22,800 --> 00:09:24,150
Vamos ver como isso se parece. Se

102
00:09:24,150 --> 00:09:25,950
salvarmos isso, é isso

103
00:09:26,000 --> 00:09:27,230
que recebo aqui.

104
00:09:27,230 --> 00:09:32,960
Agora posso rolar para lá porque configurei uma exibição de rolagem e, na verdade, esse não é o comportamento

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

106
00:09:34,160 --> 00:09:35,570
Não vou definir uma

107
00:09:35,570 --> 00:09:39,620
altura aqui, apenas adicionarei uma altura máxima para que isso seja limitado

108
00:09:39,620 --> 00:09:44,500
a uma certa altura, mas, por padrão, leva apenas a altura necessária e, portanto, prefiro

109
00:09:44,540 --> 00:09:49,820
adicionar um pouco de preenchimento para termos alguns espaço em torno das entradas e ele não

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

111
00:09:50,450 --> 00:09:56,420
na borda do cartão, então isso parece muito melhor e vamos ver como isso se parece no Android;

112
00:09:56,440 --> 00:09:57,870
sim, geralmente parece bom.

113
00:09:58,690 --> 00:10:00,730
Se eu tocar lá, isso também

114
00:10:00,730 --> 00:10:06,860
rolará para cima, para que a visualização de teclado evite seu trabalho, mas é claro que ainda recebo um erro aqui ao

115
00:10:07,040 --> 00:10:11,190
alterar a entrada que está causando um erro, porque sim, eu adicionei uma alteração de

116
00:10:11,200 --> 00:10:15,070
valor aqui, que deve ser na alteração de entrada, não na alteração de valor.

117
00:10:15,070 --> 00:10:18,370
Então isso é uma pequena correção, mas estamos indo na direção certa.

118
00:10:18,430 --> 00:10:20,740
Agora, ainda não terminei, quero ter um título

119
00:10:20,740 --> 00:10:24,950
de cabeçalho e que tal alguma cor de fundo aqui, que provavelmente também seria legal.

120
00:10:25,080 --> 00:10:32,680
Então, para isso, em relação ao título do cabeçalho, é claro, podemos adicionar o AuthScreen. navigationOptions e trabalhar com algumas opções estáticas no

121
00:10:32,680 --> 00:10:39,070
momento, porque eu só quero adicionar um título de cabeçalho aqui e definir isso

122
00:10:41,480 --> 00:10:46,700
para autenticar ou apenas autenticar, algo assim e para o plano

123
00:10:46,700 --> 00:10:48,090
de fundo,

124
00:10:48,110 --> 00:10:53,680
é claro que poderíamos dar uma visão aqui que contém tudo cor

125
00:10:54,380 --> 00:11:01,280
de fundo, mas na verdade quero mostrar um novo componente que não usamos até agora

126
00:11:01,280 --> 00:11:09,480
e, para isso, precisamos instalar um novo pacote e esse é o pacote expo-linear-gradient que você instalou com

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

128
00:11:12,510 --> 00:11:16,190
Este é um pacote que nos permite adicionar

129
00:11:16,200 --> 00:11:18,270
um gradiente linear

130
00:11:18,570 --> 00:11:25,080
com facilidade; portanto, de uma maneira muito simples e após a instalação, você

131
00:11:25,800 --> 00:11:32,760
só precisa importar do expo-linear-gradient e importar um componente exposto, o componente gradiente linear.

132
00:11:32,770 --> 00:11:39,730
Agora, esse é um componente que você pode usar em sua página e aqui eu o usarei dentro do

133
00:11:39,730 --> 00:11:47,770
teclado, evitando a visualização, gradiente linear como este e envolvendo-o em todo o outro conteúdo como este aqui e agora você pode

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

135
00:11:49,240 --> 00:11:56,060
isso e ali. deseja certificar-se de que isso tenha uma chave de cores que permita que as cores

136
00:11:56,200 --> 00:12:02,080
entre elas sejam transferidas porque um gradiente é simplesmente um gradiente entre várias cores, pelo

137
00:12:02,080 --> 00:12:08,040
menos duas, mas você pode adicionar mais e agora pode adicionar apenas cores, como vermelho ou

138
00:12:08,230 --> 00:12:16,510
adicionando os códigos hexadecimais e eu quero fazer a transição entre #ffedff e, digamos, outro código hexadecimal, # ffe3ff, e é claro

139
00:12:16,510 --> 00:12:19,020
que você pode experimentar cores diferentes aqui.

140
00:12:19,030 --> 00:12:26,860
Agora também precisamos adicionar um estilo aqui e vou nomear esse gradiente de estilos que agora podemos adicionar aqui e esse

141
00:12:28,330 --> 00:12:36,040
gradiente terá uma largura de 100% e uma altura de 100%, para que ele ocupe toda a largura e altura.

142
00:12:36,040 --> 00:12:40,560
pode ser, é assim que parece, mas agora temos um problema, é

143
00:12:40,560 --> 00:12:41,890
claro que nosso

144
00:12:41,940 --> 00:12:46,300
conteúdo não está mais centrado. Para garantir que esse seja

145
00:12:46,440 --> 00:12:52,410
o caso, agora precisamos adicionar conteúdo justificado e alinhar itens novamente e, portanto, aqui

146
00:12:52,410 --> 00:12:53,010
na

147
00:12:53,010 --> 00:12:55,880
tela ao redor, podemos nos livrar disso.

148
00:12:55,960 --> 00:12:57,490
Agora, temos a mesma aparência

149
00:12:57,820 --> 00:13:01,930
de antes, obviamente, também podemos conseguir isso não definindo largura e altura, mas apenas flexionando uma.

150
00:13:02,200 --> 00:13:07,210
Portanto, agora com esta configuração aqui e é importante que a tela não tente centralizar

151
00:13:07,210 --> 00:13:08,610
porque, caso contrário,

152
00:13:08,620 --> 00:13:15,510
o gradiente será centralizado, mas com essa configuração, agora temos essa aparência com esse belo gradiente e, para ver o título

153
00:13:15,510 --> 00:13:21,960
do cabeçalho aqui, apenas precisamos garantir que, na configuração da navegação, no navegador da loja, atribuímos nossos acessórios de

154
00:13:21,960 --> 00:13:23,850
navegação padrão ao navegador de autenticação.

155
00:13:23,970 --> 00:13:29,670
Então, adicionarei o segundo argumento para criar o navegador de pilha e as opções de navegação padrão apenas apontam para as opções

156
00:13:29,670 --> 00:13:34,980
de navegação padrão que configuram a cor do cabeçalho, a cor do título do cabeçalho e assim por diante.

157
00:13:39,730 --> 00:13:45,190
Obviamente, verifique se você não possui erros de digitação aqui nas opções de navegação da tela de

158
00:13:45,190 --> 00:13:46,480
autenticação, como eu.

159
00:13:46,480 --> 00:13:50,950
Então, com isso corrigido, esta é a configuração que temos aqui, é claro

160
00:13:50,950 --> 00:13:54,830
que você pode experimentar as cores e usar cores diferentes, se

161
00:13:55,060 --> 00:14:01,480
preferir, estou feliz com isso e agora a única coisa que quero corrigir aqui é o meu estilo para os

162
00:14:01,480 --> 00:14:09,650
botões, algum espaçamento ao redor deles seria bom e isso pode ser facilmente adicionado colocando os botões nas visualizações aqui, na verdade os dois botões.

163
00:14:12,500 --> 00:14:22,640
Então, eu farei isso aqui e agora darei a cada visualização um estilo aqui, talvez o contêiner de botões de estilos, faça isso na primeira e na segunda e agora podemos

164
00:14:22,760 --> 00:14:24,980
dar a esse contêiner um estilo

165
00:14:24,980 --> 00:14:29,500
lá em baixo na folha de estilo e aqui pode definir uma margem

166
00:14:29,750 --> 00:14:35,930
superior, por exemplo, 10 para garantir que cada botão tenha uma pequena margem até o topo, para que os

167
00:14:35,930 --> 00:14:40,760
botões não fiquem diretamente próximos um do outro, o que eu acho que realmente

168
00:14:40,790 --> 00:14:41,900
ajudaria nossos botões.

169
00:14:41,900 --> 00:14:43,350
Portanto, isso parece bom

170
00:14:43,340 --> 00:14:45,280
no iOS, também vamos ver no Android,

171
00:14:45,290 --> 00:14:46,910
sim, isso não parece tão ruim.

172
00:14:47,810 --> 00:14:53,090
Então, com isso, temos essa configuração básica, agora vamos ter certeza de que isso também faz algo útil e

173
00:14:53,090 --> 00:14:55,160
que realmente tentamos fazer login com isso.