Executando verificação de segurança...
11

Pitch: 📤Criei um app com Electron útil para mim. Talvez seja para você !

App tray com Electronjs

E aí galera, eu queria compartilhar com vocês um appzinho bem simples que desenvolvi e uso demais no dia a dia para facilitar o acesso às minhas redes sociais e de quebra ainda ajuda a manter meu desktop organizado e meu navegador sem um monte de abas e janelas abertas.

Trayzinho App

Então, como eu disse, o app não tem nome porque a idéia não é que seja comercial. Só útil :) Para facilitar nosso papo aqui vamos chamá-lo de "Trayzinho" por motívos óbvios. Pra quem não sabe, Tray é uma aplicação que roda na taskbar do sistema operacional dos computadores desktops e notebooks.

O meu Trayzinho é feito com Electron e é super simples, mas muito prático. Com apenas dois cliques, consigo acessar todas as minhas redes sociais que mais utilizo. E o melhor de tudo, não preciso ficar digitando login e senha toda vez que quero ver uma notificação ou post novo.

Eu já configurei todas as minhas contas nas redes sociais e agora é só clicar no ícone do Trayzinho na barra de tarefas e escolher qual rede social eu quero acessar. E é isso aí, simples assim.

Outra coisa legal do meu Trayzinho é que ele é personalizável. Eu posso escolher quais redes sociais eu quero incluir e quais eu não quero, recompilar e já era.

O que é o Electron ?

Se você nunca ouvir falar no Electron, ele é um framework de desenvolvimento de aplicativos de desktop incrível!

"Crie aplicativos desktop usando tecnologias web, como HTML, CSS e JavaScript."

Basicamente, o Electron permite que você crie aplicativos desktop usando tecnologias web, como HTML, CSS e JavaScript. Ele é super legal porque você pode desenvolver um aplicativo que funciona em diferentes sistemas operacionais, como Windows, Mac e Linux, usando tecnologias que você já conhece.

Isso significa que você pode criar um único aplicativo e distribuí-lo para diferentes plataformas sem precisar reescrever o código do zero. Além disso, o Electron tem várias bibliotecas e recursos que ajudam muito no desenvolvimento, então você pode economizar tempo e esforço.

Algumas utilizações práticas do Electron

Com o Electron, você pode criar aplicativos desktop incríveis e super úteis, como editores de texto, clientes de e-mail, navegadores e muito mais. E o melhor é que você pode personalizar o aplicativo de acordo com as suas necessidades, adicionando as funcionalidades que você quiser.

Então, se você é um desenvolvedor web e está pensando em criar um aplicativo de desktop, não deixe de considerar o Electron. Ele é uma opção incrível que vai te ajudar a desenvolver um aplicativo poderoso, rico em recursos e que pode rodar em diferentes plataformas.

Finalizando

Devem existir apps que fazem coisas parecidas com o que faz o Trayzinho, mas eu quis criar o meu próprio, com as minhas preferências e necessidades. Acho incrível o que podemos fazer com o conhecimento certo, muitas vezes com poucas línhas de código. É uma das grandes vantagens de ser Dev, não é ?

Tá no Git

E se alguém aí quiser testar e usar é só clonar lá no Git.
Quem sabe um dia meu Trayzinho não vira um app famoso 😂😂😂

Aproveita, testai o Trayzinho e me conecta lá no Linkedin.

Carregando publicação patrocinada...
2
1

lvcapoe PR show demais e já aceito 👏👏👏

Ficaria mais massa ainda se permitisse ao usuário adicionar as redes diretamente das Configurações.

Top demais. Valeu !!!

1

Opa, muito obrigado.

Tô usando o app aqui e acredito que pra fechar com chave de ouro falta só um pequeno CRUD nas configurações e uma opção pra customização de tema (mudar a cor do app, transparência, etc). Vou começar a trabalhar mais nisso nos planos de fundo, vai ser massa!

1
2

Ótimo projeto. Já estou utilizando rsrs. Adaptei para as redes sociais que mais utilizo, inclusive Faculdade e Udemy. Só enfrentei algumas dificuldades para poder manipular o código por nunca ter tido um contato com electron, porém com conhecimento básico de JS consegui abstrair o código e adaptar para minha realidade. As dificuldades foram:

  1. Executar o código "npm start" e não aparecer nenhuma janela (percebi depois que a aplicação fica nos utilitários do SO ao lado de onde fica a hora).
  2. Quando coloquei minhas redes sociais no codigo fonte e executei a aplicação, o background ficou transparente. Resolvi mudando o valor da chave "transparent: true" para "transparent: false", que está no arquivo "main.js" dentro do objeto win, mais especificamente na linha 25.

Tentarei dar um pull para adicionar uma documentação de como excluir e adicionar novos itens.
Desde já muito obrigado por compartilhar seu projeto. Há muito tempo estava pensando em desenvolver algo parecido para facilitar minha navegação.
Para quem não tem familiaridade com aplicações segue um passo a passo de como rodar a aplicação na sua máquina abaixo.

  1. Tenha o nodejs instalado na sua máquina (caso não tenha procura um tutorial no YT é muito fácil)
  2. Acesse o diretório principal da aplicação pelo terminal
  3. Rode o comando "npm i" ou "npm install" (irá instalar as dependências automaticamente)
  4. Após o término das instalações das dependências, rode o comando "npm start"
  5. ATENÇÃO: NÃO IRÁ ABRIR NENHUMA JANELA, ISSO É NORMAL.
  6. Note que apareceu um icone no canto inferior direito ou superior direito na barra de tarefas do seu sistema operacional. Basta clicar no ícone e navegar pela aplicação.

DÁ UM UP NO COMENTÁRIO PRA AJUDAR A GALERA QUE TÁ COMEÇANDO. OBRIGADO!!!

Minhas redes sociais:
GitHub: https://github.com/danibex
Linkedin: https://www.linkedin.com/in/daniel-santana-dev/
Portifólio: https://danibex.github.io/portifolio/

1
1
1
1
1

A ideia aqui era utilizar o Electron mas realmente temos muitas opções.
Até mesmo meu velhinho VisualBasic rsrs

Abre um PR no repo e adiciona uma versão em C#. Vai ser massa ver esse projeto simples crescer e ajudar outros mais.👊🏻

Valeu Felipe !

1
1
0

achei a ideia bastante interessante (mesmo que eu não tenha um computador), se você focar nesse projeto ele pode ficar muito mais útil ainda, por exemplo criar um botão para adicionar novas redes sociais ✌️

1