⚡ TRACER 🏎️

Índice 📃

• Descrição do Projeto
• Tecnologias Utilizadas
• Design do Aplicativo
• Instalação
• Execução
• Como configurar o Android Simulator
  • Instalando o Chocolatey e o Android Simulator
  • Configurar um emulador
  • Inicialização do Android Simulator
• Dependências do Projeto
• Pessoas Desenvolvedoras do Projeto

Descrição do Projeto 📑

Nós da LANE, desenvolvemos um aplicativo em React Native, nomeado TRacer, com o objetivo de popularizar a Fórmula E por meio de uma competição online de pontos. Os usuários poderão selecionar dois pilotos para compor sua equipe e acumular pontos com base no desempenho deles nas corridas, que será medido pelo tempo de volta.

Esses dados serão captados por outro projeto nosso, o TrackVision. Embora a primeira versão do aplicativo não consiga coletar essas informações, planejamos, em futuras atualizações, permitir que os usuários visualizem o histórico de pontos dos pilotos em seus perfis, possibilitando um acompanhamento mais próximo e em tempo real.

Além disso, na próxima versão do aplicativo, os usuários terão acesso a gráficos interativos que mostrarão o desempenho dos pilotos, incluindo velocidade, aceleração e tempo por volta. Esses gráficos serão gerados por nosso software em Python, enriquecendo a experiência do usuário e proporcionando uma análise detalhada das corridas.

Tecnologias Utilizadas 📲

Design do Aplicativo 📁

Acesse o Figma de nosso projeto aqui!

Instalação 🖥️

    git clone https://github.com/L-A-N-E/App-TRacer

    cd App-TRacer

    npm install

Execução 💾

    npm start
    npm andorid # Rodar em Android
    npm ios # Rodar em IPhone

OBS: Na versão atual, foi feita principalmente para Android, no AndroidSimulator com o dispositivo Pixel 4a

Como configurar o Android Simulator 📱

Instalando o Chocolatey e o Android Simulator 📥

• 1. Instale o Chocolatey seguindo estas instruções;
• 2. Instale o Android Simulator;
• 3. Abra o Android Studio Setup . Em Select components to install , selecione Android Studio e Android Virtual Device. Em seguida, clique em Next;
• 4. No Assistente de configuração do Android Studio, em Tipo de instalação , selecione Padrão e clique em Avançar;
  Imagem de ilustração para o passo a cima

  
• 5. O Android Studio Setup Wizard pedirá que você verifique as configurações, como a versão do Android SDK, platform-tools e assim por diante. Clique em Next depois de verificar;
• 6. Na próxima janela, aceite licenças para todos os componentes disponíveis;
• 7. Após a conclusão da instalação das ferramentas, configure a ANDROID_HOME variável de ambiente. Vá para Painel de Controle do Windows > Contas de Usuário > Contas de Usuário (novamente) > Alterar minhas variáveis ​​de ambiente e clique em Novo para criar uma nova ANDROID_HOME variável de usuário. O valor dessa variável apontará para o caminho para seu Android SDK:
  • 7.1. Por padrão, o Android SDK é instalado no seguinte local: %LOCALAPPDATA%\Android\Sdk
  • 7.2. Para ter mais certeza, você pode encontrar o caminho vá para Configurações > Idiomas e Frameworks > Android SDK.
    Veja a localização ao lado de Android SDK Location

    
• 8. Para verificar se a nova variável de ambiente foi carregada, abra o PowerShell e copie e cole o seguinte comando para verificar as variáveis de ambiente, e verifique se o ANDROID_HOME está entre elas:

  Get-ChildItem -Path Env: 

• 9. Para adicionar platform-tools ao caminho, vá para Painel de Controle do Windows > Contas de Usuário > Contas de Usuário (novamente) > Alterar minhas variáveis ​​de ambiente > Caminho > Editar > Novo e adicione o caminho para platform-tools à lista.
  • 9.1. Por padrão, as ferramentas da plataforma são instaladas no seguinte local: %LOCALAPPDATA%\Android\Sdk\platform-tools
    Veja o caminho para platform-tools

    

Configurar um emulador 📴

• 1. Na tela principal do Android Studio, clique em Mais ações e depois em Gerenciador de dispositivos virtuais no menu suspenso.
  Veja o caminho para os dispositivos virtuais

  
• 2. Clique no botão Criar dispositivo:
• 3. Em Select Hardware, escolha o tipo Pixel4a.
  Veja o Pixel4a selecionado no Android Simulator

  
• 4. Selecione o sistema operacional Tiramisupara carregar no emulador e baixe a imagem.
  Veja o sistema operacional Tiramisu selecionado

  
• 5. Altere quaisquer outras configurações que desejar e pressione Finish para criar o emulador.

Inicialização do Android Simulator ▶️

• Ao iniciar o programa, aparecerá a opção Press a │ open Android, então pressione a para iniciar o Android Simulator via Terminal;
  Veja a opção para iniciar o Android Simulator

  
• Se você não quiser iniciar assim, você poderá iniciar no Android Simulator antes para depois selecionar no terminal a opção Press a │ open Android;
  Veja a opção para iniciar o emulador no Android Simulator

  

Dependências do Projeto ⚙️

• React Native Async Storage: npm install @react-native-async-storage/async-storage

  • Baixamos esse pacote para poder concertar um erro que não era fatal para funcionalidade do projeto para não termos problemas futuros;

• React Native Firebase:

  1. App: npm install @react-native-firebase/app
  2. Auth: npm install @react-native-firebase/auth
  3. Firebase: npm install firebase
  • Utilizamos esses pacotes para conectar o Firebase ao nosso aplicativo, como fazer a autenticação do usuário.

• React Navigation:

  1. Native: npm install @react-navigation/native
  2. Stack: npm install @react-navigation/stack
  3. Bottom-Tabs: npm install @react-navigation/bottom-tabs
  4. React Native Screens: npm install react-native-screens
  • Utilizamos esses pacotes para navegar entre as telas do aplicativo

• Styled-Components: npm install styled-components

  • Baixamos esse pacote para estilizar o nosso projeto

• Expo Vector Icons: @expo/vector-icons

  • Utilizamos para colocar os ícones na aba de navegação!

Pessoas Desenvolvedoras do Projeto 🌐

Alice Santos Bulhões	Eduardo Oliveira Cardoso Madid	Lucas Henzo Ide Yuki	Nicolas Haubricht Hainfellner
RM:554499	RM:556349	RM:554865	RM:556259