1
00:00:02,230 --> 00:00:08,830
Agora, além de configurar um novo projeto do zero com a React Native CLI ou com a expo CLI

2
00:00:08,860 --> 00:00:10,820
e, em seguida, escolher o fluxo

3
00:00:11,020 --> 00:00:19,710
de trabalho simples, você pode até converter um projeto gerenciado em um projeto de fluxo de trabalho simples do React Native e isso é muito legal,

4
00:00:19,900 --> 00:00:24,480
porque isso significa que você pode obter tudo os recursos de conveniência do

5
00:00:24,490 --> 00:00:32,170
fluxo de trabalho gerenciado durante o desenvolvimento e quando terminar, por exemplo, ou quando precisar de um determinado pacote de terceiros que integre

6
00:00:32,230 --> 00:00:38,110
algum recurso que você não incorporou à expo e absolutamente necessário, nesse caso, você pode ainda mude

7
00:00:38,110 --> 00:00:43,180
e você não precisará recriar o aplicativo do zero e criar um projeto totalmente novo

8
00:00:43,180 --> 00:00:44,890
e copiar seu código.

9
00:00:45,010 --> 00:00:51,380
Quão? Bem, no seu projeto e esse é o recurso

10
00:00:51,380 --> 00:00:57,520
nativo do dispositivo, os ótimos locais que construímos no início do curso, onde podemos adicionar locais, onde é claro que

11
00:00:57,520 --> 00:01:05,230
estamos usando a localização, mapas, a câmera, SQLite, onde estamos usando tudo isso coisas, neste projeto, você pode simplesmente executar a expo eject e isso

12
00:01:05,230 --> 00:01:10,390
transforma o seu projeto em um projeto de fluxo de trabalho gerenciado que não é da expo.

13
00:01:10,390 --> 00:01:13,110
Importante, porém, não há como voltar atrás, é claro

14
00:01:13,110 --> 00:01:18,550
que você pode copiar sua pasta e fazer uma cópia de backup e salvá-la ou, se estiver usando o git,

15
00:01:18,550 --> 00:01:23,860
pode voltar para um commit anterior, mas se você não salvou o seu projeto, uma vez que você o

16
00:01:23,860 --> 00:01:25,360
ejeta, você não pode

17
00:01:25,360 --> 00:01:26,900
transformá-lo novamente; portanto, esteja ciente disso.

18
00:01:27,160 --> 00:01:32,680
Você precisaria criar um novo projeto gerenciado da expo e copiar todo o seu código,

19
00:01:32,680 --> 00:01:33,970
se quisesse voltar.

20
00:01:33,970 --> 00:01:40,720
Então, aqui, se você executar o expo eject, deverá ser perguntado para qual tipo de projeto você deseja ejetar

21
00:01:40,750 --> 00:01:46,180
e aqui tenho duas opções no final. Agora, as opções que você vê aqui a propósito podem diferir ao longo

22
00:01:46,210 --> 00:01:52,360
do tempo, mas aqui, as duas opções que eu tenho são o kit bare e expo. O kit Expo foi descontinuado. Isso é

23
00:01:52,360 --> 00:01:58,780
basicamente o que tínhamos antes de termos o fluxo de trabalho vazio; portanto, você não deve realmente mudar

24
00:01:58,780 --> 00:02:02,520
para isso. Em vez disso, pode mudar para bare aqui,

25
00:02:02,530 --> 00:02:08,710
o que significa simplesmente que agora isso será transformado em um projeto React Native, como se fosse

26
00:02:08,710 --> 00:02:13,010
criado com o React Native CLI sem o wrapper expo, mas será

27
00:02:13,030 --> 00:02:18,640
pré-configurado conforme mencionado aqui na página react-native-unimodules. É esse tipo de pacote que o expo

28
00:02:18,670 --> 00:02:26,200
precisa expor todas essas APIs expo a aplicativo não expo. Portanto, ele pré-configura todas essas coisas durante cada ação, para

29
00:02:26,200 --> 00:02:29,140
que você não precise fazer isso, para

30
00:02:29,350 --> 00:02:36,120
obter um aplicativo React Native plus, por assim dizer. Portanto, se eu clicar em enter aqui e

31
00:02:36,120 --> 00:02:42,310
agora importante, você não poderá voltar depois que isso estiver concluído, você pode escolher um nome para

32
00:02:42,910 --> 00:02:50,490
a tela inicial e eu escolherei ótimos lugares aqui, por exemplo, pressione enter, agora nomeie meu Android Studio e Xcode projetos rn-guide,

33
00:02:50,530 --> 00:02:54,670
mas isso é com você e agora isso fará o seu trabalho.

34
00:02:54,880 --> 00:02:56,280
Ele transforma o projeto, adiciona

35
00:02:56,290 --> 00:03:02,380
uma pasta Android e, como estou no macOS, também adiciona uma pasta iOS. É claro que no Windows e Linux,

36
00:03:02,380 --> 00:03:06,970
isso não acontece porque, como você agora precisa criar isso localmente,

37
00:03:06,970 --> 00:03:08,660
ele não pode

38
00:03:09,640 --> 00:03:16,450
criar aplicativos iOS e pré-configura tudo e instala algumas dependências para que você possa usar seu código

39
00:03:16,450 --> 00:03:22,150
existente. e todos os pacotes expo que você já instalou nesta configuração simples, para

40
00:03:22,150 --> 00:03:25,130
que ele não apenas configure todas as

41
00:03:25,240 --> 00:03:32,710
coisas dos unimodules aqui, ele também garante que todos os pacotes que você já esteja usando, como local da

42
00:03:33,130 --> 00:03:37,980
expo ou expo SQLite, também trabalhos. Portanto, agora isso pode demorar um

43
00:03:38,010 --> 00:03:46,260
pouco, então vamos esperar que isso termine e aqui está feito, e você vê que ele realmente me diz que geralmente fez

44
00:03:46,260 --> 00:03:50,430
seu trabalho, mas havia dois pacotes que exigem alguma configuração manual.

45
00:03:50,430 --> 00:03:54,750
Você pode simplesmente clicar nesses links para obter instruções sobre o que você precisa fazer

46
00:03:54,780 --> 00:04:00,810
lá, é o seletor de imagens expo e o pacote de mapas React Native, onde você precisa fazer alguma instalação

47
00:04:00,810 --> 00:04:01,980
manual para finalizar.

48
00:04:02,820 --> 00:04:05,010
Portanto, aqui na página do seletor

49
00:04:05,010 --> 00:04:11,400
de imagem expo, no final, o que precisamos fazer é executar a instalação da porta na pasta iOS, por

50
00:04:11,400 --> 00:04:11,810
isso

51
00:04:11,820 --> 00:04:18,660
precisamos fazer todas as coisas depois de instalar o pacote. Portanto, na pasta do projeto, navegarei no iOS e

52
00:04:18,660 --> 00:04:24,930
executarei a instalação da porta, a porta é como npm para iOS, instala algumas dependências que o

53
00:04:25,050 --> 00:04:32,040
iOS precisa para funcionar corretamente, então é isso que está acontecendo agora e, uma vez feito, também precisamos adicionar essa

54
00:04:32,040 --> 00:04:36,030
entrada aqui ao manifesto do Android, então também precisamos fazer isso.

55
00:04:36,270 --> 00:04:42,030
Portanto, precisamos ir para a pasta Android, a pasta do aplicativo e a pasta de origem,

56
00:04:42,360 --> 00:04:47,070
o AndroidManifest e, conforme descrito aqui, adicionar isso dentro das tags do aplicativo.

57
00:04:47,070 --> 00:04:57,060
Então, aqui está a aplicação e, lá, devemos adicionar esta entrada de atividade aqui, assim, é necessária.

58
00:04:57,300 --> 00:05:02,280
Agora, enquanto eu já estou aqui, você também verá que esse arquivo de manifesto também

59
00:05:02,280 --> 00:05:02,950
foi

60
00:05:03,090 --> 00:05:08,940
configurado de uma certa maneira, inclui todas as permissões e, claro, você não deseja fazer isso, apenas solicita

61
00:05:08,940 --> 00:05:10,390
as permissões você realmente precisa.

62
00:05:10,410 --> 00:05:18,480
Então, como diz aqui, remova as permissões que seu aplicativo não precisa e, por exemplo, meu aplicativo de demonstração

63
00:05:18,480 --> 00:05:24,300
aqui só precisa da permissão de localização e localização de acesso, que eu vou

64
00:05:27,440 --> 00:05:36,890
subir lá e da câmera, é claro, que eu vou subir lá e também a permissão de armazenamento externo de gravação, que também

65
00:05:41,790 --> 00:05:43,520
deve ser necessária.

66
00:05:43,530 --> 00:05:48,900
Na verdade, essas devem ser todas as permissões e você pode verificar todos os pacotes de terceiros ou

67
00:05:48,900 --> 00:05:54,110
todos os pacotes da API expo que você está usando para garantir que não perca nenhuma permissão.

68
00:05:54,300 --> 00:06:00,840
Com isso, vou comentar todas essas permissões aqui e também todas essas permissões e vamos

69
00:06:00,840 --> 00:06:09,170
testá-lo para ver se funciona. Então, com isso, a configuração do pacote do seletor de imagens está concluída. Agora, os mapas do React

70
00:06:09,190 --> 00:06:14,880
Native também precisam ser configurados e podemos mergulhar nas instruções de instalação.

71
00:06:14,880 --> 00:06:18,260
Agora, este comando npm install, que já aconteceu, mas agora o que precisamos

72
00:06:18,390 --> 00:06:24,960
fazer é executar os mapas do React Native link React Native. Então, vamos simplesmente subir um nível

73
00:06:25,020 --> 00:06:32,380
de volta à pasta do projeto raiz e executar o link React Native Mapas

74
00:06:32,380 --> 00:06:34,590
do React Native

75
00:06:34,600 --> 00:06:40,870
e que agora vincularão tudo, verifique se tudo funciona corretamente, se tudo

76
00:06:40,870 --> 00:06:49,120
está configurado corretamente e você ainda precisará fazer algumas instruções coisas, todas essas coisas aqui

77
00:06:49,270 --> 00:07:00,230
não devem ser necessárias, tudo deve ser feito com links, mas no Android, você deve adicionar esta entrada aqui, essa

78
00:07:00,230 --> 00:07:05,520
entrada de metadados à chave do aplicativo no AndroidManifest.

79
00:07:05,630 --> 00:07:11,990
Portanto, aqui dentro do aplicativo, podemos adicionar essa entrada e você deve colocar sua chave da API do

80
00:07:11,990 --> 00:07:12,740
Google Maps.

81
00:07:12,840 --> 00:07:14,680
Agora eu tenho isso na

82
00:07:14,690 --> 00:07:21,230
pasta env, se você se lembra, então eu vou pegar essa chave e adicioná-la aqui, substituir sua chave da API

83
00:07:21,230 --> 00:07:23,490
do Google Maps aqui por ela e

84
00:07:23,660 --> 00:07:31,040
também importante: se você for para a página da API do Google Maps, precisará para ativar esse SDK de mapas para Android para

85
00:07:31,040 --> 00:07:31,790
seu projeto,

86
00:07:31,790 --> 00:07:36,500
isso é importante, caso contrário, isso não funcionará. Para o iOS, você não precisa fazer nada de

87
00:07:36,500 --> 00:07:41,690
especial, a menos que queira usar o Google Maps lá. Nesse caso, siga as instruções fornecidas nas instruções de React Native maps

88
00:07:41,870 --> 00:07:44,920
aqui para saber como usar o Google Maps no iOS, mas no

89
00:07:45,800 --> 00:07:52,930
Android você definitivamente precisamos ativar a API do SDK do Google Maps para Android aqui. Para ativar essa API, você pode acessar o Google Cloud Platform

90
00:07:52,940 --> 00:07:58,760
aqui para o projeto em que trabalhou anteriormente, quando configurou a chave da API e assim por

91
00:07:59,000 --> 00:08:05,240
diante e, aqui, em APIs e serviços, pode acessar a biblioteca que o leva a uma biblioteca de

92
00:08:05,240 --> 00:08:09,710
todas as APIs do Google e do SDK de mapas para Android, é

93
00:08:09,710 --> 00:08:11,120
necessário ativar isso.

94
00:08:11,120 --> 00:08:15,980
Você também precisará configurar o SDK do Google Maps para iOS se quiser usar o Google Maps no iOS,

95
00:08:15,980 --> 00:08:17,150
que não utilizarei aqui.

96
00:08:17,350 --> 00:08:18,760
Agora já deve estar ativado aqui,

97
00:08:18,770 --> 00:08:21,500
mas verifique se está. Portanto, caso não tenha sido

98
00:08:21,590 --> 00:08:22,710
ativado, faça-o definitivamente.

99
00:08:24,370 --> 00:08:27,240
Com isso, isso também deve ser configurado de forma

100
00:08:27,250 --> 00:08:34,450
que funcione e agora, se executarmos o Android de execução nativo react, o aplicativo que construímos em um módulo anterior com o fluxo

101
00:08:34,450 --> 00:08:41,260
de trabalho gerenciado da expo ainda funcionará, agora sem o fluxo de trabalho gerenciado da expo sem o cliente expo que está

102
00:08:41,260 --> 00:08:47,770
sendo usado no simulador ou no dispositivo real, mas construa localmente com o Android Studio ou, é claro, também com o

103
00:08:47,770 --> 00:08:54,000
iOS, se você quiser usá-lo e, portanto, da mesma maneira que faria em um projeto criado pelo React Native CLI,

104
00:08:54,010 --> 00:08:55,510
mas agora, após a

105
00:08:55,510 --> 00:09:01,000
ejeção do fluxo de trabalho gerenciado, o que obviamente significa que todo esse código foi escrito no

106
00:09:01,000 --> 00:09:07,180
fluxo de trabalho gerenciado, e agora eu o executo no fluxo de trabalho não gerenciado, o que é bastante interessante.

107
00:09:07,180 --> 00:09:10,830
Então, vamos esperar que isso termine e ver se esse aplicativo funciona da maneira que deveria.

108
00:09:11,590 --> 00:09:16,780
Está chegando no emulador Android aqui, que é o emulador que eu quero usar para testar porque

109
00:09:16,780 --> 00:09:23,020
lá posso usar a câmera do emulador para testar e, novamente, apenas para enfatizar isso, agora não está usando o aplicativo

110
00:09:23,020 --> 00:09:24,400
cliente expo, também não

111
00:09:24,400 --> 00:09:28,930
poderíamos ' t escanear um código de barras aqui, porque não há código de barras

112
00:09:28,940 --> 00:09:34,570
para escanear, agora este é realmente um aplicativo criado com o Android Studio e enviado para o nosso aplicativo.

113
00:09:34,720 --> 00:09:38,710
Então, aqui está o nosso aplicativo e agora vamos tentar adicionar

114
00:09:38,710 --> 00:09:44,470
um novo local aqui, testar, tirar uma imagem, permitir o acesso à câmera, é claro, e

115
00:09:49,370 --> 00:09:50,630
então tirar essa imagem

116
00:09:53,960 --> 00:09:55,190
sim, recorte-a, escolha

117
00:09:56,060 --> 00:09:58,010
um local no mapa, talvez,

118
00:10:00,760 --> 00:10:04,050
aqui está o mapa, este local parece bom para

119
00:10:04,070 --> 00:10:06,760
mim, salve isso, salve o local, aqui estamos

120
00:10:06,760 --> 00:10:07,540
nós

121
00:10:07,540 --> 00:10:09,940
e agora deixe-me fechar este aplicativo.

122
00:10:10,060 --> 00:10:13,210
Lá, você também vê que esse é realmente um aplicativo

123
00:10:13,210 --> 00:10:19,210
independente instalado. Se eu abrir a gaveta de aplicativos aqui no dispositivo, aqui no simulador, é esse ótimo

124
00:10:19,380 --> 00:10:22,040
aplicativo de lugares que você vê aqui.

125
00:10:22,040 --> 00:10:28,920
Portanto, se eu iniciar isso, agora reiniciaremos o aplicativo em que trabalhamos e o local será armazenado no armazenamento local,

126
00:10:29,190 --> 00:10:30,330
a imagem obviamente

127
00:10:30,330 --> 00:10:34,540
foi armazenada no sistema de arquivos, caso contrário não a veríamos

128
00:10:34,710 --> 00:10:41,370
e funcionaria como antes, mas agora não dentro do cliente expo, mas como um aplicativo autônomo sem nenhum invólucro

129
00:10:41,370 --> 00:10:41,970
expo,

130
00:10:41,970 --> 00:10:48,300
ainda usando algumas das APIs expo e pacotes expo com a ajuda deste pacote unimodules que é automaticamente

131
00:10:48,300 --> 00:10:53,640
adicionado e configurado para o fluxo de trabalho simples que, por outro lado, obtivemos com

132
00:10:53,700 --> 00:10:55,080
a ajuda de ejetar.

133
00:10:55,080 --> 00:10:57,000
Tantas coisas legais acontecendo lá.