Aplicativo Desktop com abas usando Electron

Há alguns dias foi apresentado aqui o BASEL ,um framework desenvolvido pelo Clube dos Geeks capaz de criar aplicativos Desktop usando as tecnologias: Bootstrap, AngularJS, SQLite e Electron.

Hoje faremos um exemplo de software multitelas, dividido por abas.

Instalando o BASEL

Podemos instalar o BASEL usando NPM:

$ npm install -g basel

Precisamos ter instalados na máquina o Node.js e o Git.

Iniciando aplicativo

Iniciaremos nosso aplicativo usando o BASEL que está instalado de forma global, usando o seguinte comando:

$ basel-init meuAplicativo -b tabs

Será criada uma pasta com o nome meuAplicativo e dentro dela estarão as pastas e arquivos de seu novo aplicativo BASEL, usando o tema basel-app-tabs como base.

Instalando dependências

Usando o terminal execute os seguintes comandos:

$ cd meuAplicativo #para entrar na pasta do aplicativo

e

$ npm install #para instalar as dependências

Criando CRUD

BASEL é capaz de criar CRUDs com base em templates pré estabelecidos, criando controllers e views baseados em AngularJS e usando a estrutura do Bootstrap.

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 Pessoas -t pessoas -n “id:INTEGER, nome:CHAR(100), email:CHAR(100)” -p id -i id

O comando acima irá criar um CRUD a partir da tabela usuarios depois de ter criado a tabela com a seguinte estrutura:

Usamos a opção -p ou –pk para indicar qual é a PRIMARI KEY da tabela. E a opção -i ou –incremental para informar os campos auto incrementais da tabela.

Você pode criar outros CRUDs usando esta estrutura. Pode também criar sues próprios controllers e views sem usar o BASEL, usando a função addTab(options) para adicionar novas abas. As opções são:

name String Nome da aba, que irá aparecer na descrição
view String Nome do arquivo .html que será usado como view
active boolean Informa se a aba tem preferência em relação às outras para ficar ativa quando for chamada

O controller deve ser informado na view, usando o atributo ng-controller.

Executando

Para executar seu novo aplicativo use o seguinte comando:

$ npm start

Este comando está definido no arquivo package.json de sua aplicação. Assim como os comandos para empacotar, ou seja gerar o executável da sua aplicação, como npm run win32 que gera o executável capaz de ser executado no sistema operacional Windows com arquitetura ia32.

Executando npm start seu aplicativo será executado com uma tela semelhante à seguir:

Tela do aplicativo Electron

Mais sobre o BASEL

Você pode ter mais detalhes sobre o BASEL no site oficial. E veja a Documentação.

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

Deixe uma resposta

Seu e-mail não será publicado.