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

 

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:

19 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

  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

Deixe uma resposta

Seu e-mail não será publicado.