Code Monkey home page Code Monkey logo

rocket-help's Introduction

ROCKET HELP

É 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.

PROTÓTIPO

O protótipo do projeto se encontra na plataforma FIGMA, acesse o prototipo aqui .

EXECUÇÃO

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.

CRIANDO O FIREBASE

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.

CONFIGURANDO O EXPO-FIREBASE

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.

rocket-help's People

Contributors

eddypbr avatar

Stargazers

Roman avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.