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.