Cartálogo

Descrição

Este é Cartálogo, um teste prático feito com o intuito de participar de um processo seletivo onde se deve ser contruído uma aplicação mobile que consiga ser alimentada por um backend fornecendo dados de carros e assim o frontend possa além de listar esses dados também criar, alterar ou excluí-los desde que o usuário esteja devidamente logado e autenticado no sistema.

As tecnologias usadas no projeto devem seguir:

• React Native (Frontend);
• Node Js ou outro a escolha (Backend);
• Qualquer banco de dados desde que seja explicado no README qual e como utilizar;

Os seguintes requisitos devem ser preenchidos:

• Home page pública exibindo a vitrine de veículos (exemplo de vitrine: https://www.kavak.com/br/carros-usados // Não seguir a risca);
• Os veículos devem estar ordenados em ordem de valor;
• Para cadastro dos veículos, deverá ter um login administrativo;
• O sistema só pode ser acessado se o usuário conseguir se autenticar;
• Todas as requisições privadas precisam de um token válido gerado no login para funcionamento da requisição;
• O cadastro de veículos deverá ter listagem, criação, edição e deleção de registros;
• Os atributos obrigatórios para os veículos são: Id, Nome, Marca, Modelo e Foto;
• O Backend deverá ser uma API Rest;
• Todos os dados devem ser persistidos no banco de dados;
• Prazo para entrega de 7 dias corrido a partir da data de recebimento do mesmo(02/11/2021 até 08/11/2021);
• Fonte deve conter README explicando o passo a passo para funcionamento do projeto com um todo, caso algo não esteja funcionando ou explicado será descontado da nota final;

Como iniciar o projeto

Banco de dados

Primeiramente antes de qualquer coisa é necessário que você tenha um servidor Postgres na versão mais recente rodando no seu local, pode ser uma distribuição por docker ou normal, as configurações como nome, username, password porta ou host podem ficar ao seu crítério, esses dados vão ser adicionados quando chegarmos na etapa das variáveis de ambiente.

Variáveis de ambiente

Primeiro passo após baixar ou clonar o repositório para sua máquina é abrir a pasta 'backend' e crie uma cópia do arquivo chamado '.env.example' renomeando para '.env', logo em seguida entre no arquivo e configure todas as variáveis lá contidas. A descrição para cada uma eu deixo logo abaixo:

SERVER_PORT: A porta que o backend vai rodar .

DB_DATABASE: O nome do seu banco de dados.
DB_USERNAME: O usuário do seu banco de dados.
DB_PASSWORD: A senha do seu banco de dados.
DB_HOST: O host o seu banco de dados. ex: localhost
DB_PORT: A porta que o banco de dados irá escutar. Padrão do Postgres é 5432.

ADMIN_NAME: Será o nome da primeira conta feita no servidor
ADMIN_EMAIL: Será o email da primeira conta feita no servidor
ADMIN_PASSWORD: Será a senha da primeira conta feita no servidor

AUTH_SECRET: É o token secreto para manter o JWT seguro, você pode gerar o seu em qualquer gerador de md5. ex: b90551da89aa31610e92fb171c12862d
AUTH_EXPIRES_IN: É o tempo que o token do usuário demora para expirar. ex: 1d

Backend

Após a configuração de todas a variáveis do sistema comece realizando o seguinte comando no seu terminal:

yarn ou npm init

Após todas as dependências instaladas devemos alimentar o banco de dados com as migrations e seeds:

yarn sequelize db:migrate:all ou npm sequelize db:migrate:all

yarn sequelize db:seed:all ou npm sequelize db:seed:all

Com o servidor alimentado vamos iniciar o backend com:

yarn dev ou npm dev

Agora temos nossa api funcionando, devemos voltar para a pasta raiz e seguir para o mobile.

Mobile

Faremos o mesmo processo inicial realizado no backend para a instalação de todas as dependências:

yarn ou npm init

Caso não tenha um emulador no seu computador realize o passo a passo no site Emulador - Rocketseat Docs. Caso tenha realize o seguinte comando em caso de android:

yarn android ou npx react-native run-android

Em caso de iOS:

yarn ios ou npx react-native run-ios

E então possívelmente você estará vendo Home do Cartálogo, caso tenha ocorrido algum erro ou o comando de android ou ios não tenha aberto um novo terminal para o metro realize o seguinte comando:

yarn start ou npx react-native start

Tecnologias usadas

Entre projetos

• Eslint;
• Prettier.

Backend

• Banco de dados Postgres;
• Api em Node.js com Express;
• ORM com Sequelize;
• Autenticação com JWT;
• Upload de arquivos com multer;
• Além de algumas bibliotecas menores para usos específicos.

Mobile

• React Native;
• Estilização com styled-components e polished;
• Navegação com react-navigation;
• Formulários usando Unform e Yup para validação dos dados;
• Requisições foram feitas usando Axios;
• Além de algumas bibliotecas menores para usos específicos.

Possíveis problemas

• O picker de imagens no emulador do android parece não funcionar, mesmo dando o comando e permissão ao aplicativo para acessar a câmera e a biblioteca de imagens, o emulador acaba retornando um erro e não é possível realizar a atualização de fotos para a api.

Autor

Marcelo "Masa" Alves
@masamarux

Histórico de versões

• 0.1 - (08/11/2021)
  • Lançamento inicial