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:

2 respostas

  1. Pablo

    Hola Jayr,

    I’m trying to learn a bit of Angular and Electron with basel. I was wondering if you could resolve me a doubt I have regarding the basel-app-tabs template.

    If I would like to be able to open as many tabs for products, for instance, how can we use the same controller? I have tried to create a button that opens the view (ng-click=’addTab({id:1, name:”Products”, view:”app/views/products.html”, active: true})’) it does work but the problem is that actions performed in the latest view opened are being reflected on the first one only (I have implemented some changes, like one button to clean the input field, when I click on it, it cleans the field of the first tab view not the one from which I’m clicking the button).

    How could it be done to difference each tab, to create new replica views dynamically and independents? I will really appreciate any guidance on how this scenario is normally resolved.

    Thanks in advance!!

    Pablo

    Responder

Deixe uma resposta

Seu e-mail não será publicado.