https://github.com/vickttor/notification_app_web
Aplicação construída com Electron, que faz notificações para o usuário a cada 60 minutos (valor que pode ser alterado dentro de App.start( ) ). Ele roda em 2° plano e é exibido como Tray na barra de tarefas.
https://github.com/vickttor/notification_app_web
css electron html javascript
Last synced: 10 months ago
JSON representation
Aplicação construída com Electron, que faz notificações para o usuário a cada 60 minutos (valor que pode ser alterado dentro de App.start( ) ). Ele roda em 2° plano e é exibido como Tray na barra de tarefas.
- Host: GitHub
- URL: https://github.com/vickttor/notification_app_web
- Owner: vickttor
- Created: 2021-06-19T22:17:14.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-15T01:33:47.000Z (almost 4 years ago)
- Last Synced: 2025-01-22T16:08:59.913Z (12 months ago)
- Topics: css, electron, html, javascript
- Language: JavaScript
- Homepage:
- Size: 757 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notifications Electron
[](https://github.com/VictorSilva15/notification_app_web/issues) [](https://github.com/VictorSilva15/notification_app_web/network) [](https://github.com/VictorSilva15/notification_app_web/stargazers)
Essa aplicação foi produzida com auxílio da PlayList [Insta Post Reminder - Aplicativo de Notificação para Desktop](https://www.youtube.com/playlist?list=PLeLKux5eT3kbD0iUjYCHmea57EGQSphc9) do canal Mayk Brito. No vídeo é mostrado como produzir uma aplicação com JS Puro e renderizar em tempo real no Html. Em cada vídeo foi apresentados conceitos novos e muito interessantes, como:
- Notificação no Browser
- Import/Export de módulos
- Async/Await
- Tratamento de excessões
- JS Moderno (e puro)
- Trabalhar com timer
- Sistema de Eventos Pub/Sub
- App Desktop com Electron
- ... muito mais
Acesse os [vídeos](https://www.youtube.com/watch?v=Mhd6x2Z-F_w) e faça você mesmo sua versão!
Status do Projeto
🚧 ... 🚀 Em Produção ... 🚧
Demonstração
- Versão Web:
- Versão Desktop:
Pré-requisitos
Para executar essa projeto basta abrir a página index.html com o Live Server no seu navegador (Chrome, Edge, FireFox). Se quiser modificar o código será necessário um editor de códigos de sua preferência. Recomendo usar o Visual Studio Code.
Para seguir os passos a seguir é necessário que você tenha instalado em sua máquina o node.js, git,Visual Studio Code ou outro editor de preferência
Para rodar a aplicação na sua máquina primeiro clone o projeto para sua áreia de trabalho. para isso entre no terminal com as teclas W + R e digite cmd
Dentro do cmd entre na sua área de trabalho ou em uma pasta de sua preferencia. Para isso use o comando cd + caminho da pasta que quer entrar, exemplo:
```bash
cd desktop/clone_notifications_app_web
```
Estando dentro da pasta rode o comando a seguir para inicializar o git na sua pasta e poder baixar os arquivos:
```bash
git init
```
Em seguida use:
```bash
git clone https://github.com/VictorSilva15/notification_app_web.git
```
Esse comando irá iniciar a clonagem do projeto linkado nesse repositório para dentro da pasta que você criou em sua máquina.
Agora é abrir a pasta no seu editor de preferencia como Visual Studio Code, ou Sublime Text. Se você tiver instalado o VS Code basta dentro do terminal executar:
```bash
code .
```
Esse comando irá abrir o projeto dentro do VS code para começarmos a execução
Você verá diversas pastas como src que contém toda a lógica da aplicação. Dentro dela há diversos scripts que são as funções JS separadas. Foi utilizado módulos de import e export para a conexão entre esses arquivos por tanto se você quiser rodar essa aplicação no estado atual, não basta apenas abrir o index.html, você terá que rodar a aplicação com o Live Server, que é uma extensão do Visual Studio Code que nos permite rodar o código no browser através de um link privado de salvamento automático. Dentro da pasta Electron há os scripts que permitem a execução da versão desktop de nosso projeto. Agora, se você quiser rodar a versão desktop do Electron siga os passos abaixo
Instalando dependências
Para rodar/testar a aplicação versão Electron na sua máquina, primeiramente será necessário que você instale o npm para instalar os node_modules dentro do projeto e assim conseguir inicializá-lo. Para isso entre na pasta do projeto se ainda não estiver nela com:
```bash
cd notifications_app_web
```
Depois use o comando:
```bash
npm i
```
Feito isso, começará a instalar os pacotes necessários para rodar os arquivos na sua máquina.
Depois de instalar o npm, basta iniciar a aplicação com:
```bash
npm start
```
Pronto, sua aplicação deverá iniciar, e assim você pode começar os testes
Se você quiser alterar o tempo que as notificações aparecem, entre em index.html e mude o valor que está sendo passado como parâmetro na função App.start(). O tempo passado ali são em segundos por tanto o valor 60 é igual a 1 minuto para o ciclo de notificação. Se nenhum valor for especificado, o ciclo de notificações padrão será de 1 hora.
### 🛠 Tecnologias
As seguintes ferramentas foram usadas na construção do projeto:
- [HTML](https://developer.mozilla.org/pt-BR/docs/Web/html)
- [CSS](https://developer.mozilla.org/pt-BR/docs/Web/css)
- [JavaScript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
- [NodeJS](https://nodejs.org/en/)
- [Electron](https://www.electronjs.org/)
- [Google Fonts Poppins](https://fonts.google.com/specimen/Poppins?query=Popp)
## 💪 Como contribuir para o projeto
1. Faça um **fork** do projeto.
2. Crie uma nova branch com as suas alterações: `git checkout -b my-feature`
3. Salve as alterações e crie uma mensagem de commit contando o que você fez: `git commit -m "feature: My new feature"`
4. Envie as suas alterações: `git push origin my-feature`
> Caso tenha alguma dúvida confira este [guia de como contribuir no GitHub](./CONTRIBUTING.md)
---
### Autor
Victor Hugo🚀
Feito com ❤️ por Victor Hugo da Silva 👋🏽 Entre em contato!
---
[](https://www.linkedin.com/in/victor-silva-9485021b2/)
[](mailto:victor470hugo@gmail.com)