Criando aplicativos Desktop com Basel
Você já viu aqui no Clube dos Geeks, alguns tutoriais mostrando como desenvolver aplicativos desktop usando tecnologias WEB, com dois frameworks: NW.js e Electron. Hoje mostraremos um caminho mais rápido e mais simples para isso.
O que é Basel?
Basel é um framework desenvolvido pelo Clube dos Geeks capaz de criar aplicativos Desktop usando as tecnologias: Bootstrap, AngularJS, SQLite e Electron.
Ele é capaz de criar e se comunicar com banco de dados, usando os módulos sqlite-sync.js e/ou sqlite-cipher.js para isso. O Basel também cria views e controllers de acordo com templates pre-definidos nos temas, usando AngularJS.
Você pode ver a documentação completa aqui.
Instalação
Pré-requisitos do sistema
Para que o Basel funcione corretamente você precisa ter instalado em sua máquina o Node.js e o Git.
Instalando
Instale via NPM como global usando o seguinte comando:
$ npm install -g basel
Iniciando aplicativo
Com o basel instalado de forma global, você não precisa se preocupar em instala-lo novamente sempre que quiser iniciar outro aplicativo, apenas quando houverem atualizações de versões do basel.
Para iniciar um novo aplicativo use o seguinte comando:
$ basel-init meuAplicativo
Será criada uma pasta com o nome meuAplicativo onde será clonado o tema mais básico do basel. Também será criado o arquivo de banco de dados dentro da pasta model, com o nome padrão database, você pode usar outro nome usando a opção -d ou –database.
Você pode criar o aplicativo com o banco de dados criptografado, graças ao pacote sqlite-cipher, você só precisa usar a opção -c ou –cipher e informar a algoritmo (-a ou –algorithm) e a senha (-p ou –password) usados para criptografar seu novo banco de dados. Veja um exemplo:
$ basel-init meuAplicativo –database banco –cipher –algorithm “aes-256-ctr” –password “senha”
Se você usar a opção –cipher, mas não informar a senha e o algoritmo, eles lhe serão perguntados.
Instalando dependências
Depois de ter iniciado o aplicativo, acesse a pasta dele com o comando:
$ cd meuAplicativo
E execute o comando:
$ npm install
Para instalar as dependências.
Testando novo aplicativo
Para testar seu novo aplicativo execute o comando:
$ npm start
Você verá uma tela semelhante a essa:
Criando CRUD
BASEL é capaz de criar CRUDs com base em templates pré estabelecidos, criando controllers e views baseados em AngularJS.
Você pode criar tabelas no banco de dados e depois criar CRUDs a partir delas. Ou cria-las ao mesmo tempo que cria o CRUD.
$ basel-crud “Usuários” –table usuarios –columns “id:INTEGER, nome:CHAR(100), senha:CHAR(20),email:CHAR(100)” –pk id –incremental id
O comando acima irá criar um CRUD a partir da tabela usuarios depois de ter criado a tabela com a seguinte estrutura:
CREATE TABLE usuarios( id INTEGER AUTOINCREMENT PRIMARY KEY, nome CHAR(100), senha CHAR(20), email CHAR(100) );
Você ainda pode adicionar foreign keys usando a opção –references “campo : tabela_refenciada.campo_referenciado”. Veja mais detalhes sobre criação de CRUDs aqui.
Tendo executado o comando acima para a criação do CRUD de usuários, serão criados os arquivos usuarios.html dentro da pasta views, e usuariosController.js dentro da pasta controllers de sua aplicação.
Executando novamente seu aplicativo com o comando $ npm start verá que no menu existe um link para Usuários, clicando nele você terá a seguinte tela:
Com um botão para adicionar novo item, que chama um formulário dentro de um modal; uma tabela que tem no cabeçalho os campos da tabela do banco de dados; e um campo de pesquisa.
Ao cadastrar um item, você verá os botões Edit e Delete. O botão Edit vai abrir o formulário de edição e o Delete vai perguntar se você tem certeza que deseja excluir o item.
Os arquivos gerados pelo BASEL estarão totalmente livres para sua edição.
Templates
Os templates usados pelo BASEL para criação das views e controllers ficam dentro da pasta templates de sua aplicação, e podem ser modificados ao seu gosto, observando os parâmetros da documentação.
Concluindo.
O BASEL continua em desenvolvimento, você pode acompanhar pelo site oficial, pelo Git Hub, ou pelo Facebook.
E então o que achou? Deixe seu comentário.
Primeiramente, muito bom trabalho!
Por que vocês escolheram usar Electron invés do NWJS?
Opa Leonardo, valeu.
Não escolhi Electron baseado em desempenho ou coisa do tipo. Somente por que é mais fácil pra executar e gerar o executável.
Parece que uma nova versão do Electron foi lançada. Isso mudará alguma coisa? Seria bacana um artigo essas mudanças (se realmente foi lançada uma nova versão)
Abraços!
Saiu sim uma nova versão, a 1.0, mas não mudou muita coisa não.
Você pode ter mais detalhes nas Releases
Apenas para compartilhar a solução de um erro que estava acontecendo comigo.
Quando eu executava basel-init meuAplicativo, recebia a seguinte mensagem:
/usr/bin/env: “node\r”: Arquivo ou diretório não encontrado
Solucionei abrindo o arquivo basel-init.js com o vim e executando o seguinte comando:
:set ff=unix
Detalhe o erro aconteceu no Linux Mint, provavelmente vai acontecer em distros Ubuntu.
Ok.
No mac, não esta rodando o basel-init, retorna o erro:
env: node\r: No such file or directory
Alguma dica ou sugestão para a correção?
O comentário de Igor Xavier, não resolve seu problema?
Não funcionou pra mim. Deu esse mesmo erro dos outros: node\r: diretório não encontrado, tentei a opção do igor mas não sei como usar aquele parâmetro :set ff=unix. ):
No meu está ocorrendo erro também ao executar basel-init meuAplicativo
Alguém descobriu?
Olá . Instalar dependências necesarisa e durante a execução de “npm start ” Eu recebo o seguinte erro em windows 7 HP 64 bits: http://i67.tinypic.com/2u6ecdx.png
Não consegui ver a imagem.
http://oi67.tinypic.com/2u6ecdx.jpg
Ainda não consigo, diz que o server não foi encontrado.
http://i1115.photobucket.com/albums/k548/nanoelgrande10/2u6ecdx.jpg_zpsictthms3.png
Tenta iniciar um novo aplicativo agora Paulo.
Muito obrigado , resolvido.
Hi,
Could you please share the documentation link to create executable from basel app ?
I have tried electron-packager, but it shows parameter values ( example : {{item.id}} ) instead of menu items.
Here is the screenshot I’m getting : https://postimg.org/image/g6vrqul95/
Use Ctrl+shift+I to see the error.
Olá amigo, estamos aqui nesta URL pesquisando sobre este assunto no google e convidamos-o para uma parceria que estamos lançando este mês que é simplesmente disponibilizar brindes personalizados com o logo do seu site, em troca gostaríamos de adicionar nosso banner que pode ser adquirido em nosso site. Se interessou? acesse:: http://brindes.LTDA/
https://www.brindespersonalizados.ltda/
Quando vou criar o crud da esse erro, sabe o que é ?
Cannot find module ‘jsdom/lib/old-api.js’
quando crio um novo app
basel-init myApp -d myapp
C:\Users\Roxis\Documents\neard\bin\nodejs\nodejs12.1.0\node_modules\basel\node_modules\sqlite-sync\sqlite.js:79
throw x;
alguem pode ajudar ???