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:

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:

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.

Jayr Alencar

Doutorando em Ciências da Computação no Centro de Informática da Universidade Federal do Pernambuco (CIn - UFPE); Mestre pela mesma instituição; Formado em Análise e Desenvolvimento de Sistemas; Católico; Fã de O Senhor do Anéis.

Você pode gostar...

22 Resultados

  1. Leonardo disse:

    Primeiramente, muito bom trabalho!
    Por que vocês escolheram usar Electron invés do NWJS?

  2. Igor Xavier disse:

    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.

  3. Rafael Sanches disse:

    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?

  4. Paulo disse:

    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

  5. Dixon disse:

    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.

  6. Brindes Personalizados disse:

    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/

  7. Renan Morais disse:

    Quando vou criar o crud da esse erro, sabe o que é ?

    Cannot find module ‘jsdom/lib/old-api.js’

  8. Luis Carlos disse:

    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 ???

Deixe um comentário para Brindes Personalizados Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *