Sumário
Este aplicativo é basicamente um projeto template para ajudá-lo com alguns recursos básicos que normalmente precisamos desenvolver, como um collapsed menu, switch theme e um login simples. Então, criei este aplicativo para aproveitar melhor o tempo em coisas novas. Além disso, você pode verificar outros componentes, como Linha (Row), Coluna (Column), Caixa (Box), Switch Button, Barra de ferramentas (Toolbar), Título (Title) and Subtítulo (Subtitle).
Lembrando que este aplicativo é baseado em Electron.js, então vamos precisar do Node instalado na máquina. Depois disso, você pode usar o editor de desenvolvimento de sua preferência, no meu caso, usei o Visual Studio Code.
Se você não quiser ler a documentação aqui, criei algumas páginas dentro do aplicativo com instruções como esta. Então, basta fazer o clone e seguir os passos de instalação abaixo.
# Clone o repositório
$ git clone https://github.com/mcosta21/starctron.git
# Acesse a pasta
$ cd starctron
# Instale as dependências
$ yarn or npm install
# Inicie o aplicativo
$ yarn electron-dev or npm run electron-devstarctron
│
└─── src
│ │ index.js
│ │ routes.js
│ │
│ └─── assets
│ │
│ └─── components
│ └─── Body
│ └─── Menu
│ └─── SwitchButton
│ │ ...
│ │
│ └─── contexts
│ │ LoginContext.js
│ │ MenuContext.js
│ │ ThemeContext.js
│ │
│ └─── pages
│ └─── Home
│ └─── SignIn
│ └─── Layout
│ │ ...
│ │
│ └─── screen
│ │
│ └─── services
│ │
│ └─── styles
│ │ GlobalStyles.js
│ │ theme.js
│
│ .env
│ .gitignore
│ package.json
│ README.md
│ README-pt-br.md
Electron |
React JS |
React Icons |
React Router |
Styled Components |
Dentro do aplicativo, você pode utilizar alguns componentes que o ajudarão a criar seu conteúdo, como inserir uma caixa, com linhas e colunas. Por exemplo:
<Row height={100}>
<Column>
<Box>
<h3>100%</h3>
</Box>
</Column>
</Row>
<Row height={100}>
<Column width={50}>
<Box>
<h3>50%</h3>
</Box>
</Column>
<Column width={50}>
<Box>
<h3>50%</h3>
</Box>
</Column>
</Row>
<Row height={100}>
<Column>
<Box>
<h3>33%</h3>
</Box>
</Column>
<Column>
<Box>
<h1>33%</h1>
</Box>
</Column>
<Column>
<Box>
<h1>33%</h1>
</Box>
</Column>
</Row>
<Row height={100}>
<Column width={70}>
<Box>
<h3>70%</h3>
</Box>
</Column>
<Column width={30}>
<Box>
<h3>30%</h3>
</Box>
</Column>
</Row>
<Row height={130}>
<Column width={20}>
<Box>
<h3>20%</h3>
</Box>
</Column>
<Column width={80}>
<Box>
<h3>80%</h3>
</Box>
</Column>
</Row>
<Row height={130}>
<Column width={40}>
<Box>
<h3>40%</h3>
</Box>
</Column>
<Column width={30}>
<Box>
<h3>30%</h3>
</Box>
</Column>
<Column width={30}>
<Box>
<h3>30%</h3>
</Box>
</Column>
</Row>
Navegando para a pasta de componentes, você encontrará o componente Menu. Observe que sua estrutura é baseada na constante options, que serão renderizadas por um map. Então, para cada opção, um Link React-router-dom está disponível com os seguintes atributos:
const options = [
{
"title": "Home",
"link": "/home",
"icon": "<FaHome size={20}/>"
}
];Por fim, basta acessar o arquivo routes.js na raiz do projeto, e incluir as novas rotas para cada página, correlacionando-as com o atributo link da constante options.
A API Context é como o React disponibiliza os dados dos componentes pai para filho por meio das props. Assim, não é necessário passar explicitamente as props em cada componente.
Então, dentro da pasta src, você pode ver os contextos criados e que estão em uso no aplicativo, por exemplo:
| LoginContext | Esse context é responsável por manter o usuário da sessão em todos os componentes. |
| MenuContext | Esse context é utilizado pelo componente Menu para manter o estado de largura ministrado pelo atributo isSmallMenu. |
| ThemeContext | Esse context é responsável por gerenciar o tema da aplicação entre light e dark. |
Conforme declarado na página Context API, criamos um sistema de login simples para manter o usuário em toda a sessão usando a LoginContext, então você pode acessar a pasta de services e personalizar o user.js com seu próprio método para se conectar ao banco de dados e integrar nas páginas SignIn e ForgotPassword.
{
"id": "3",
"username": "mcosta",
"password": "12345",
"email": "marcioc424@gmail.com",
"photo": "https://avatars0.githubusercontent.com/u/30120305?s=400&u=2c33a6777ec253d664a59108230924e555c89070&v=4"
}No arquivo routes.js, note que tem um redirecionamento para a página SignIn quando não há usuário na sessão, com isso, basta comentar essa linha e partir para o desenvolvimento.
Acessando a pasta styles, você pode customizar todas as cores disponíveis no aplicativo.
No arquivo GlobalStyles.js contém todos os estilos aplicados ao tema global. E no arquivo theme.js, contém as variáveis referentes aos temas light e dark, além de um conjunto de cores auxiliares.
Light theme
export const lightTheme = {
name: 'light',
backgrounds: {
lightest: '#FFFFFF',
lighter: '#FEFEFE',
dark: '#F5F5FC',
darker: '#D8DCF3',
darkest: '#CCC8C8',
},
colors: {
lightest: '#252131',
lighter: '#201B2D',
dark: '#31303C',
darker: '#15121E',
darkest: '#13111B'
},
colorsTheme
}Dark theme
export const darkTheme = {
name: 'dark',
backgrounds: {
lightest: '#252131',
lighter: '#201B2D',
dark: '#191622',
darker: '#15121E',
darkest: '#13111B'
},
colors: {
lightest: '#FFFFFF',
lighter: '#FEFEFE',
dark: '#F5F5FC',
darker: '#D8DCF3',
darkest: '#CCC8C8',
},
colorsTheme
}Global colors
export const colorsTheme = {
white: '#FFF',
grey: '#F7F8FC',
opaque: '#41414D',
purple: '#',
purpleDark: '#5A4B81',
green: '#6CCACE',
orange: '#E89E64',
pink: '#FF79C6',
cyan: '#78D1E1',
red: '#E96379',
yellow: '#FFDD67',
blue: '#4849FF'
}O arquivo theme.js é o mais importante nesse assunto, dado que o utilizamos no ThemeContext para gerenciar o tema atual da aplicação, como podemos observar ao clicar num SwitchButton. Então, caso queira customizar os temas, basta alterar os atributos de cada variável.
A melhor parte do projeto é a pré-configuração já feita, isso visa facilitar sua vida e não te fazer perder tempo com certas configurações de projeto.
Então, antes de partirmos para o processo de build, será necessário fazer pequenas alterações no aplicativo. Claro que isso deve ser feito se você quiser o nome e icones personalizados a seu gosto.
Primeiramente, faremos algumas alterações nos arquivos contidos na pasta public. Então localize o arquivo index.html e altere a tag 'title' para o nome do seu aplicativo.
<title>{ your_app_name }</title>
Após isso, acesse o arquivo de configurações do electron, e nele, você pode customizar diversas coisas como tamanho da janela, menu e icone.
A função createWindow possui atributos como width, height e icon, customize-os a vontade. Note também que, mesmo informando os atributos de tamanho da janela, a chamada mainWindow.maximize() mantém a tela em maximaze, caso queira mudar isso, apenas remova o comando.
Agora que fizemos essas personalizações, vamos para o processo de build do aplicativo. Então, acesse o arquivo package.json. Nesse arquivo, você verá todas as informações necessárias do aplicativo, tais como nome, descrição, dependências, scripts e etc. Então, lembre-se de alterações os seguintes atributos:
{
"name": "your_app_name",
"description": "your_app_description",
"author": "your_name",
}E o mais importante, o atributo build contém o appId, não se esqueça de troca-lo, caso esteja fazendo seu próprio aplicativo, no contrário, o instalador irá substitui-lo.
{
"build":
{
"appId": "your_unique_app_id"
}
}Finalmente, abra o terminal e execute o seguinte comando:
Após finalizar o processo, será criado uma pasta chamada dist, nela haverá o arquivo instalador pronto para uso 🚀.
Após finalizar o processo, será criado uma pasta chamada dist, nela haverá o arquivo instalador pronto para uso 🚀.
 |
Inglês / English |
|---|
Marcio Costa @mcosta21