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:

1.fw

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:

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:

2.fw

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.

19 respostas

      • Leonardo

        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!

  1. Igor Xavier

    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.

    Responder
  2. Rafael Sanches

    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?

    Responder
  3. Dixon

    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.

    Responder

Deixe uma resposta

Seu e-mail não será publicado.