Este projeto se consiste em um gerador de senhas fortes desenvolvido com React Native, TypeScript e Expo na temática do Batman. Foi o meu primeiro contato utilizando React Native e aprendi bastante sobre os componentes específicos do framework e a trabalhar com o sistema android lado a lado através de emuladores e pelo Expo Go.
- Clone este repositório:
git clone https://github.com/GracilianoOG/dio-bat-pass.git- Abra o projeto em sua IDE preferida, exemplo no VSCode:
cd dio-bat-pass/- Após navegar para dentro do diretório, inicie o VSCode:
code .- Instale as dependências:
npm install- Rode o projeto com o script (padrão):
npm run start| Script | Comando | Descrição |
|---|---|---|
start |
expo start |
Inicia o projeto no modo padrão |
android |
expo start --android |
Inicia o projeto no emulador Android |
ios |
expo start --ios |
Inicia o projeto no simulador iOS |
web |
expo start --web |
Inicia o projeto no navegador web |
📁 assets/ -> assets (imagens) do projeto.
📁 src/
📁 components/ -> componentes separados em pastas.
📁 constants/ -> constantes utilizadas no projeto.
📁 context/ -> contextos e providers.
📁 screens/ -> telas que serão compostas com os componentes.
📁 services/ -> serviços da aplicação.
📁 types/ -> arquivos de tipagens do TypeScript.
📄 app.json -> configurações do app.
📄 images.d.ts -> declarações dos tipos de imagens.
📄 App.tsx -> entry point do app (componente principal).
Os componentes são organizados em pastas com seu devido nome. O componente principal possui a palavra component em seu nome, enquanto os estilos incluem a palavra style:
📁 components/
📁 BatButton/
📄 BatButton.component.tsx
📄 BatButton.style.tsx
Tela inicial do aplicativo. Ela contém o campo que aparece a senha gerada, um botão para gerar uma nova senha aleatória e um botão para copiar a senha gerada.
Configurações disponíveis para customizar a senha. O usuário pode habilitar ou desabilitar características da senha gerada, como:
- Caracteres maiúsculos
- Caracteres minúsculos
- Caracteres numéricos
- Caracteres especiais
Informações adicionais sobre o desenvolvedor e algumas das tecnologias usadas no desenvolvimento do app.
- Desenvolvido com
React Nativepara criar aplicativos móveis nativos. - Utiliza
Expopara facilitar o desenvolvimento e a gestão do projeto. - Usa
reactpara construir a interface do usuário. - Implementa funcionalidades de clipboard com
expo-clipboard. - Desenvolvido com
TypeScriptpara garantir tipagem forte e maior segurança. - Ferramentas de desenvolvimento com suporte a tipagens do React.
- Navegação entre as telas desenvolvida com o pacote
bottom-tabs, que permite adicionar abas na parte inferior da tela. - Persistência dos dados feita com o pacote
async-storage.
- Digital Innovation One
- React Native Components
- Expo Docs
- useContext
- Switch Component
- Bottom Tabs
- Async Storage
 GracilianoOG |
|---|
O código fonte está sob a licença MIT.