É um sistema de cadastro de tickets de problemas a serem resolvidos, o ticket
é cadastrado e então o usuário autenticado pode finaliza-lo, assim indicando
que o ticket foi resolvido.
O protótipo do projeto se encontra na plataforma FIGMA, acesse o
prototipo aqui
.
Para executar o projeto, faça o download deste projeto na sua máquina,
abra o terminal e vá até o diretório do seu projeto, e execute o comando
npm install
ou yarn
para instalar os pacotes.
Após isso siga para os tópicos Criando o firebase e <bConfigurando o expo-firebase, após os tópicos finalizados, é necessário conectar um aparelho Android ou iOS via USB ou executar um emulador.
Por fim abra o terminal no projeto e execute o comando:
expo run:android
ou expo run:ios
.
Em casos de não funcionar, a Rocketseat possui um manual mais detalhado
de como executar aplicações expo com firebase. Acesse o
link e saiba mais.
O processo é bem simples, acesse o firebase clique no botão Começar e depois em Adicionar projeto agora informe o nome do projeto Ex.: rocket-help e confirme.
Ao lado esquerdo, na aba de Criação existe um sub-menu chamado Authentication clique nele, após isso será aberto uma nova janela, então clique na aba Sign-in method agora na seção de Provedores de login clique no botão Adicionar novo fornecedor, por fim, selecione a opção E-mail/senha e no switch de Ativar e finalmente pressione o botão Salvar. Com isso foi habilitado a autenticação via email e senha.
Agora vamos criar o banco de dados, novamente na aba à esquerda na seção de Criação clique na opção Firestore database e na nova janela que foi aberta pressione o botão Criar banco de dados, selecione a opção Iniciar no modo de teste, depois no botão Avançar e por fim no botão de Ativar e aguarde.
Pronto estamos com o método de autenticação e o banco de dados configurados. Agora vamos as configurações extras iOS e Android.
Após finalizado, clique na opção Visão geral do projeto localizado no topo da aba à esquerda, na nova janela aberta clique no botão iOS, agora vamos completar as etapas.
Na primeira etapa, preencha o campo ID do pacote Apple, Ex.:
com.rockethelp
e um aviso... GUARDE ESSE NOME ele é o
nome do nosso PACOTE. agora no campo Apelido do app (opcional)
preencha com iOS
e por fim no código do App Store (opcional) informe qualquer
coisa, esse é o código da App Store quando for para a produção. E depois
pressione o botão Registrar App
Na segunda etapa, faça o download do arquivo GoogleService-Info.plist e depois jogue o arquivo na raiz do projeto. Agora pode seguir clicando em próximo para as próximas etapas.
Após finalizado, clique novamente na opção Visão geral do projeto localizado no topo da aba à esquerda, na nova janela aberta clique no botão + Adicionar app, e depois no ícone do android, agora vamos completar as etapas.
Na primeira etapa, preencha os campos novamente e coloque o nome do pacote
igual ao do passo anterior, agora no campo Apelido do app (opcional)
preencha com Android
o restantes dos passos é igual ao do iOS.
pronto tudo configurado, agora siga para o próximo tópico.
Configurar o expo-firebase também não é nada complicado, você pode seguir o guia-do-expo ou continuar por aqui, como bem entender.
Bem, vamos lá. Primeiramente instale o pacote @react-native-firebase/app,
execute o comando yarn add @react-native-firebase/app
ou
npm install @react-native-firebase/app
.
Enquanto faz a instalação... Vamos adicionar algumas configurações ao nosso app. No projeto, dentro do arquivo app.json dentro do objeto expo adicione a seguinte trecho de código:
"plugins": [
"@react-native-firebase/app"
],
"android": {
"package": "com.rockethelp",
"googleServicesFile": "./google-services.json"
},
"ios": {
"bundleIdentifier": "com.rockethelp",
"googleServicesFile": "./GoogleService-Info.plist"
}
OBS: no campo googleServicesFile preencha com os arquivos que foram feitos os download no tópico anterior. E nos campos package e bundleIdentifier respectivamente, preencha com o campo do PACOTE que eu mandei você guardar no também tópico anterior.
Isso diz ao nosso projeto expo que utilizaremos um novo plugin, porém não é só
isso, depois que o pacote anterior já estiver instalado, temos que abrir
o terminal e executar o seguinte comando: expo prebuild
, esse comando vai
configurar os arquivos dentro do diretório android e ios que estão
na raiz do nosso projeto.
O script vai perguntar algumas coisas, mas somente a seguinte pergunta nos interessa: What would you like your Android package name to be? nessa pergunta você deve preencher com o valor do nome do pacote que eu mandei você guardar no tópico CRIANDO O FIREBASE. Nas perguntas seguintes basta teclar enter para preencher os valores automaticamente.
Deve aparecer a mensagem Config synced no final, sendo assim estamos com o firebase e expo configurados. basta adicionar os pacotes para acessarmos o firestore e authentication. Na raiz do projeto execute os seguintes comandos:
yarn add @react-native-firebase/firestore @react-native-firebase/auth
cd ios/ && pod install
Se estiver desenvolvendo no iOS é necessário instalar o pod, se não for o caso você pode ignorar esse passo por hora, se você precisa instalar o pode acesse cocoapods.
Pronto firebase e expo configurados.