Um guia de aprendizado e ação, focado em facilidade de criação, para construir seu próprio controlador de casa inteligente para Windows usando tecnologias web (HTML, CSS, JavaScript) com Electron.
Este roteiro foca nos conceitos que você precisa dominar, em ordem de complexidade, para ser capaz de construir a aplicação do zero.
O objetivo aqui é aprender como fazer uma página web reagir às ações do usuário, sem precisar recarregar a página.
document.getElementById()document.querySelector() (Mais versátil para seleções CSS).innerHTML, .textContent).style.propertyName = 'value')addEventListener(): O "ouvinte" de ações (ex: 'click', 'mouseover').Aqui você aprende como fazer sua página buscar informações de outros sistemas na internet.
GET (buscar dados) e POST (enviar dados para criar/modificar algo).async/await: A maneira moderna e legível de escrever código assíncrono.fetch(): O comando nativo do JavaScript para fazer requisições a APIs.Nesta fase, você aprende a "empacotar" suas habilidades web em um aplicativo nativo do Windows.
npm init e o arquivo package.json.main.js): O "cérebro" que controla a janela e o sistema operacional.renderer.js): O código JavaScript que roda dentro da sua janela HTML.Aqui você aplica o conhecimento de API especificamente para controlar sua casa inteligente.
fetch para o HA.
Bearer Token.light.turn_on, switch.turn_off).body): Como especificar qual dispositivo você quer controlar.
entity_id do seu dispositivo.O objetivo final é transformar seu projeto em um arquivo instalável que pode ser compartilhado.
electron-builder.package.json.electron-store (uma biblioteca para Electron).Este guia descreve as ações que você precisa tomar, fase a fase, para construir o aplicativo. Ele assume que você está aprendendo os conceitos da Parte 1 em paralelo.
Meta: Criar uma página web local que reage a um clique.
index.html e script.js.
index.html, adicione os elementos essenciais:
<button id="btnLigar">Ligar Luz</button>)<button id="btnDesligar">Desligar Luz</button>)<p id="status">Status: Desconhecido</p>)script.js ao index.html (<script src="script.js"></script> antes de </body>).
script.js, use document.getElementById() para pegar os botões e o parágrafo. Adicione addEventListener('click', ...) para os botões. Ao serem clicados, as funções devem mudar o .textContent do parágrafo de status (ex: "Luz Ligada!").
Meta: Fazer sua página consumir uma API pública para provar que a comunicação funciona.
https://catfact.ninja/fact (retorna {"fact": "...", "length": ...})https://api.kanye.rest (retorna {"quote": "..."})fetch: Modifique a função do seu botão (ou crie uma nova). Ao invés de apenas mudar o texto, ela deve usar async/await e fetch() para chamar a API escolhida.
response.json() para parsear os dados. Extraia a informação relevante (ex: data.fact para a API de gatos) e exiba-a no seu parágrafo de status.
index.html diretamente no seu navegador. Verifique o "Console" (F12) para erros.
Meta: Fazer seu protótipo web rodar como um aplicativo de desktop Windows.
npm init -y (isso cria o arquivo package.json).npm install electron --save-dev para instalar o Electron como dependência de desenvolvimento.main.js na raiz do seu projeto. Copie o código básico da seção "Quick Start" da documentação oficial do Electron. O importante é que ele crie uma janela e carregue seu index.html.
package.json, na seção "scripts", adicione ou modifique o script de inicialização: "start": "electron .".
npm start. Sua página web deve agora abrir em uma janela de aplicativo Windows.
Meta: Fazer o clique no botão do seu app controlar um dispositivo real.
light.lampada_da_sala).
script.js, modifique a função que estava chamando a API de gatos:
http://IP_DO_HA:8123/api/services/light/turn_on (substitua IP_DO_HA pelo IP da sua VM).'POST'.headers, incluindo o Authorization: 'Authorization': 'Bearer SEU_TOKEN_AQUI'.body em formato JSON contendo o entity_id da sua lâmpada (ex: body: JSON.stringify({ entity_id: 'light.lampada_da_sala' })).npm start no terminal e clique no botão do seu aplicativo. Sua lâmpada física deve acender ou apagar!
script.js em um app real. Use uma solução como electron-store ou peça para o usuário digitar na primeira execução.
Meta: Transformar seu projeto em um arquivo .exe instalável e independente.
npm install electron-builder --save-dev.
package.json, adicione a seção "build" com as configurações básicas. Exemplo simplificado:
"build": {
"appId": "com.seuprojeto.homeassistantcontroller",
"win": {
"target": "nsis",
"icon": "build/icon.ico" // Opcional: Adicione um ícone .ico na pasta 'build'
}
}"scripts" do package.json: "dist": "electron-builder".
npm run dist. Este processo pode levar vários minutos.
dist (ou similar) será criada na raiz do seu projeto. Dentro dela, você encontrará o arquivo .exe instalável. Este é seu aplicativo final, pronto para ser compartilhado ou instalado em qualquer computador Windows.