Mecanismo de busca personalizada do Google com Electron
Olá, hoje faremos um aplicativo simples, que tem como objetivo realizar busca personalizada no Google, e para isso usaremos Electron.
Criando busca
Acesse https://cse.google.com.br/cse/ e gere o código da busca.
Estrutura do aplicativo
Deixe a estrutura de pastas e arquivos do seu projeto assim:
|-- index.html |-- main.js |-- package.json |-- node-modules/
O index.html será nossa página inicial, o main.js será o arquivo principal da aplicação, que irá conter o código JavaScript de inicialização do Electron.
package.json
Este é o arquivo de configuração da aplicação, que contém dados como nome, autor, dependências, versão, etc.
{
"name": "electron-google-custom-app",
"version": "1.0.0",
"description": "A simple electron app",
"main": "main.js",
"scripts": {
"start": "electron main.js"
},
"devDependencies": {
"electron-prebuilt": "^0.36.0"
}
}
Agora abra o terminal, e execute o seguinte comando no diretório de seu projeto:
npm install
main.js
É o arquivo que irá executar e carregar o arquivo HTML para ele. Este arquivo HTML deve ser o ponto de entrada da sua aplicação, neste caso, será o código de pesquisa personalizada do Google.
var electron = require('electron');
var app = require('app');
var BrowserWindow = require('browser-window');
// Global reference to keep the instance of window until closed by User else it will be closed when JavaScript do Garbage collection.
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});
// Load the app from HTML file.
mainWindow.loadURL('file://' + __dirname + '/index.html');
// Emitted when the window is closed.
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Esta é a estrutura básica de uma aplicação desktop com Electron, veja que na linha 20 são definidas as dimensões da aplicação e na linha 22 e passado ponto de partida que é o arquivo HTML.
index.html
É aqui que você irá copiar o código gerado pela ferramenta do Google, veja:
<!DOCTYPE html>
<html>
<head>
<title>Clube dos Geeks</title>
<script>
(function() {
var cx = '004075397997165064370:wt69rk-ivms';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
</head>
<body style="padding:50px;">
<img SRC="google_custom_logo.png" style="height: 95px;width: 269px;margin-left:150px;"></img>
<gcse:searchbox></gcse:searchbox>
<gcse:searchresults></gcse:searchresults>
</body>
</html>
Executando a aplicação
Para executar a aplicação basta rodar o código a seguir no terminal:
npm start
Será aberta uma janela com a caixa de pesquisa do Google.
Download do código
Baixe todo o código Aqui
Massa 😀
o main.js não está completo