🎙️ 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 |
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.
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.
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;
- eslint-config-airbnb: fornece o .eslintrc do Airbnb como uma configuração compartilhada extensível;
- eslint-plugin-import: é um plugin do ESLint com regras para ajudar na validação de imports;
- eslint-plugin-jsx-a11y: é um verificador estático AST das regras do a11y em elementos JSX;
- eslint-plugin-react: é um plugin que fornece regras de linting do ESLint específicas do React;
- eslint-plugin-react-hooks: é um plugin que fornece regras de hooks do ESLint específicas do React.
$ cd elzacast-frontend
$ npm install
$ expo start
Para visualizar a aplicação no seu dispositivo móvel é necessário realizar a instalação do aplicativo Expo.
- Android Play Store - Android Lollipop (5) e superior.
- iOS App Store - iOS 10 e superior.
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.
Após a instalação do aplicativo, escaneie o QRCode abaixo:
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
srcpara 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
srccomo 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;
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.
 Carlos Henrique 💻 |
 Luís Guilherme 💻 |
 Rayane Vaz 📢 |
 José Carlos 💻 |
Feito com 💜 por Equipe Elza Cast