Aplicativo Desktop com Nwjs + AngularJS + Bootstrap + Sqlite

Olá pessoal, hoje faremos um aplicativo desktop simples para cadastro de pessoas, usando nwjs, AngularJS, Bootstrap e o banco de dados Sqlite. Veja aqui como fazer um aplicativo com nwjs, executar e empacotar.

Downloads

Para iniciar faça download das tecnologias necessárias:

As demais dependências serão instaladas com NPM.

Estrutura de pastas e arquivos

Agora faremos a estrutura de pastas e arquivos da nossa aplicação.

pastas2.fw

Banco de dados

Abra o SQLiteStudio, crie um banco de dados salvando o arquivo na pasta model da sua aplicação com o nome database.db.

Conectado ao banco de dados crie a seguinte tabela:

Usaremos o campo ativo para informar se a pessoa está ativa ou não, se não está ativa está excluída.

Instalando pacotes

Para iniciar, deixaremos o arquivo package.json da seguinte maneira:

package.json

Feito isso, abra o terminal navegue usando cd até o diretório da aplicação e execute o seguinte comando: npm install

index.html

Este arquivo será o principal da nossa aplicação, e deve ter o seguinte conteúdo:

Observe que na linha 1, usamos o atributo ng-app, que serve para instanciar a aplicação, para que o angular possa trabalhar.

app.js

Criaremos agora o arquivo responsável por iniciar e direcionar as rotas do angular, veja:

services/dbService.js

Este arquivo será responsável pela conexão com o banco de dados, busca e consolidação das informações.

Como a biblioteca para SQLite – desenvolvida por nós – já tem funções de inserção e edição que facilita as querys, este service irá retornar apenas a instância da biblioteca. Veja:

controllers/pessoaControllers.js

Este arquivo, como o nome sugere, faz o controle da view, trata as informações, busca e salva no banco de dados.

Como você provavelmente vai querer criar outros CRUD’s, deve tomar esse controller como base para os outros, assim como a view, que falaremos mais abaixo.

Veja o arquivo:

views/pessoa.html

Agora, na pasta views criaremos nosso arquivo de visão, onde os dados serão mostrados.

Aqui nos usamos a diretiva dirPagination para fazer e a paginação dos dados na tabela. Veja:

Executando

Se você não sabe como executar ou gerar o .exe, Veja aqui

GitHub

Este exemplo está disponível do GitHub também, veja.

Prévia

 

24 respostas

  1. Hille

    Olá amigo tudo bem, muito bom este tutorial bem detalhado, eu queria só tirar uma duvida, se esta aplicação é necessário rodar online, eu sei que fica local, mas é necessario a pessoa ter conexão com Internet para funcionar o banco de dados e as demais requisições? Obrigado e sucesso!

    Responder
    • Jayr Alencar

      Opa Hille. Nessa aplicação não é necessário, a única coisa que precisa de conexão nela é o jQuery que é puxado da internet, o que vou mudar em breve.
      Mas você pode sim conectar ela com um banco na nuvem, ou com uma API RESTful de preferência.

      Responder
  2. romulo

    Depois que gero o executavel, no linux ou win, é possível pegar o fonte? Digo por questão de segurança na distribuição de um projeto pago.

    Responder
    • Jayr Alencar

      Opa Romulo, até onde eu sei não. Dei uma olhada na internet e nas issues do projeto nwjs no git hub e não vi nada a respeito.

      Publiquei a seguinte Issues no projeto: https://github.com/nwjs/nw.js/issues/4608
      Acompanhe.

      Sei que como o webkit é um browser serão criados vários arquivos e pastas em %LOCALAPPDATA% (em caso de windows). Mas nada referente a arquivos .html ou .js por exemplo.

      Responder
  3. Wesley

    Muito bom o artigo bem explicado, parabéns!

    Agora está dando erro no “require(‘angular-route’)”

    Uncaught ReferenceError: require is not defined(anonymous function) @ app.js:1
    pessoaController.js:2 Uncaught TypeError: Cannot read property ‘controller’ of undefined(anonymous function) @ pessoaController.js:2

    pode me ajudar?

    Responder
    • Jayr Alencar

      Oi Wesley, você executou o comando npm install?
      Se sim tente executar npm install angular-route para instalar o módulo em questão.
      Verifique se ocorre algum erro durante a instalação.

      Responder
      • Wesley

        executei sim!

        após executar o comando sugerido aparece a seguinte mensagem:

        C:\Users\wesley_oliveira\WebstormProjects\momadesAppDesktop>npm install angular-route
        nwjs-angular@1.0.0 C:\Users\wesley_oliveira\WebstormProjects\momadesAppDesktop
        └── angular-route@1.5.2

        npm WARN EPACKAGEJSON nwjs-angular@1.0.0 No repository field.

        e o erro persiste!

        Uncaught ReferenceError: require is not defined
        pessoaController.js:2 Uncaught TypeError: Cannot read property ‘controller’ of undefined
        dbService.js:2 Uncaught TypeError: Cannot read property ‘factory’ of undefined
        angular.js:4547 Uncaught Error: [$injector:modulerr] Failed to instantiate module cdg due to:
        Error: [$injector:nomod] Module ‘cdg’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

      • Philipe

        Bom dia!
        Estou com mesmo problema.

        \nwjs-angularjs-sqlite\app.js:1
        (function (exports, require, module, __filename, __dirname) { var app = angular.module(‘cdg’, [require(‘angular-route’),’angularUtils.directives.dirPagination’]);
        ^

        ReferenceError: angular is not defined
        at Object. (C:\Users\Philipe-TI\node-webk-32\projetos\p07\nwjs-angularjs-sqlite\app.js:1:81)
        at Module._compile (module.js:570:32)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)
        at Module.runMain (module.js:604:10)
        at run (bootstrap_node.js:394:7)
        at startup (bootstrap_node.js:149:9)
        at bootstrap_node.js:509:3

      • Eliézer

        Bom dia.
        Parabéns pelo tutorial,

        Ao executar o comando npm install, estou tendo o segundo retorno:
        npm WARN nwjs-angular@1.0.0 No repository field.

        Tentei rondar no chrome e no console tenho o seguinte retorno:

        pessoaController.js:2 Uncaught TypeError: Cannot read property ‘controller’ of undefined
        at pessoaController.js:2
        (anonymous) @ pessoaController.js:2
        dbService.js:2 Uncaught TypeError: Cannot read property ‘factory’ of undefined
        at dbService.js:2

        O que está errado?

      • Eliézer

        Troquei,
        mas continua retornando o mesmo erro:

        npm WARN nwjs-angular@1.5.1 No repository field.

  4. Luciano

    Jayr se eu quiser utilizar este mesmo projeto mas para web como seria, pq tentei usar num projeto q está hospedado e ele deu erro nesse require.

    Responder
  5. Marcao

    Amigo, funcionou tudo, apareceu a página index, mas ao clicar em pessoa, parece que a rota não muda, nada acontece, a tela fica simplesmente branca, tentei inclusive com o do github e deu o mesmo erro. Pode me ajudar?

    Responder

Deixe uma resposta

Seu e-mail não será publicado.