Skip to content

Latest commit

 

History

History
183 lines (134 loc) · 9.97 KB

README.md

File metadata and controls

183 lines (134 loc) · 9.97 KB

Elza Cast

🎙️ Uma aplicação mobile para facilitar o envio de alertas feitos por vítimas de violência doméstica.

Sobre o projeto   |   Sobre o Bootcamp   |    Tecnologias utilizadas   |    Pré-requisitos   |    Executando a aplicação   |    Estrutura de arquivos   |    Layout da aplicação   |    Colaboradores   |   

🚧 Projeto em desenvolvimento... 🚧

💻 Sobre o projeto

O projeto tem a finalidade de dar voz para vítimas de violência doméstica. Nesse sentido, por meio do aplicativo a vítima tem a opção de realizar chamadas de emergência (190) de forma rápida. Além disso, ela também pode alertar via SMS os contatos adicionados em sua lista em momentos de necessidade.

🖥️ Sobre o Bootcamp

A 3ª edição do Bootcamp da EloGroup é o maior ecossistema entre universitários e feras do mercado. O principal propósito do Bootcamp é destravar o potencial da nova geração de jovens que será o futuro do desenvolvimento digital dentro das empresas do país.

Leia mais sobre o Bootcamp aqui.

🚀 Tecnologias utilizadas

O projeto utiliza as seguintes tecnologias:

  • TypeScript: é um superconjunto de JavaScript que adiciona tipagem e alguns outros recursos a linguagem;
  • Expo: é uma ferramenta utilizada no desenvolvimento mobile com React Native que permite o fácil acesso às API nativas do dispositivo;
  • React Native: é uma biblioteca que permite o desenvolvimento de aplicações mobile usando JavaScript e React;
  • React Navigation: é uma biblioteca que surgiu da necessidade da comunidade do React Native de uma navegação de forma fácil de se usar, e escrita toda em JavaScript;
  • React Native Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;
  • Axios: é um cliente HTTP baseado em Promises para Browser e NodeJS;
  • Babel: é um compilador JavaScript gratuito e de código aberto e transpiler configurável usado no desenvolvimento de aplicações JavaScript;
  • ESLint: é uma ferramenta de lint plugável para JavaScript e JSX;

📋 Pré-requisitos

🔥 Executando a aplicação

🛠️ Configuração

Instalando as dependências

$ cd elzacast-frontend
$ npm install

⚡ Execução

Inicializando o projeto

$ expo start

📱 Acessando a aplicação no celular de forma local

Para visualizar a aplicação no seu dispositivo móvel é necessário realizar a instalação do aplicativo Expo.

Acesso de forma local

Após a instalação do aplicativo, basta realizar a leitura do QRCode gerado a partir do Metro Bundler e renderizado no seu navegador padrão.

Acesso de forma online

Após a instalação do aplicativo, escaneie o QRCode abaixo:

📂 Estrutura de arquivos

A estrutura de arquivos está da seguinte maneira:

elzacast-frontend
├── assets/
├── src/
│   ├── assets/
│   ├── components/
│   ├── screens/
│   ├── routes/
│   ├── services/
│   ├── styles/
│   ├── utils/
│   └── custom.d.ts
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .svgrrc
├── app.json
├── App.tsx
├── babel.config.js
├── metro.config.js
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.json
└── typings.d.ts

  • assets - Diretório contendo arquivos de mídia da aplicação, que são utilizados pelas configurações do Expo;

  • src - Diretório contendo todos os arquivos da aplicação, é criado um diretório src para que o código da aplicação possa ser isolado em um diretório e facilmente portado para outros projetos, se necessário;

    • assets - Diretório contendo todos os arquivos de mídia da aplicação, como ícones .svg e imagens .png;

    • components - Diretório onde ficam os componentes da aplicação, como forma de padronização e boas práticas. Todo componente fica dentro de um diretório com seu nome;

    • screens - Diretório que contém as telas da aplicação, como forma de padronização e boas práticas. Toda página fica dentro de um diretório com seu nome;

    • routes - Diretório onde serão criados os arquivos relacionados ao roteamento da aplicação;

      • index.tsx - Arquivo com as configurações de navegação da aplicação, nele são criados os Navigators disponibilizados na biblioteca React Navigation;

    • services - Diretório onde serão criados os arquivos relacionados a serviços utilizados na aplicação, por exemplo, requisições HTTP, autenticação com Firebase ou qualquer outro serviço que for utilizado;

      • api.ts - Arquivo com a configuração da biblioteca Axios para envio de requisições HTTP;

    • styles - Diretório onde serão criados os arquivos relacionados ao estilos globais da aplicação.

    • utils - Diretório onde serão criados os arquivos utilitários da aplicação.

    • custom.d.ts - Arquivo de configuração SVG para ESLint.

  • .eslintrc.json - Arquivo de configuração do ESLint, é nele que são inseridas as regras e configurações de Linting do projeto, tal como a configuração do Resolver para o Babel Plugin Root Import e configuração da variável global __DEV__;

  • App.tsx - Arquivo raiz da aplicação, também chamado de Entry Point, é o primeiro arquivo chamado no momento do build e execução da aplicação;

  • babel.config.js - Arquivo de configuração do Babel, é nele que é configurado o Babel Plugin Root Import para aceitar imports absolutos na aplicação usando o diretório src como raiz;

  • metro.config.js - Arquivo de configuração do Metro Bundler;

  • package.json - Arquivo de configurações das dependências utilizadas no projeto;

  • tsconfig.json - Arquivo de configuração do TypeScript no Editor, ele é o responsável por ativar o Auto Complete de códigos TypeScript na aplicação;

🔖 Layout da aplicação

Essa aplicação possui um layout que você pode seguir para conseguir visualizar o seu funcionamento.

O layout pode ser acessado através da página do Figma, no seguinte link.

Você precisará uma conta (gratuita) no Figma para inspecionar o layout e obter detalhes de cores, tamanhos, etc.

✨ Colaboradores


Carlos Henrique
💻
Luís Guilherme
💻
Rayane Vaz
📢
José Carlos
💻

Feito com 💜 por Equipe Elza Cast