Atendimento via WhatsApp Atendimento via WhatsApp

Blog Tecnológico

Introdução ao Angular Js desenvolvendo um CRM

Renato Probst • 04 nov 2016 • Angular & Ionic

Introdução ao Angular Js desenvolvendo um CRM

Utilizaremos como exemplo o sistema Gerenciar Negócio. O Gerenciar Negócio é um sistema de gestão empresarial e financeira voltado para pequenas empresas desenvolvido pela Rock Apps.

O sistema web foi desenvolvido inteiramente em Angular Js e contempla as funcionalidades de CRM e ERP:

rock-apps-eng-dtp-multimidia

O sistema se distribui em 3 áreas principais: menu lateral, barra superior e o conteúdo da página.


Menu Lateral

menu-lateral-eng-dtp-multimidia

O menu lateral possui um código muito simples e é fixo em toda a aplicação. Utilizando o componente sidebar do Angular poderemos gerar um menu lateral fixo em todas as telas criando apenas 1 arquivo:

codigo-menu-lateral-eng-dtp-multimidia

O angular trabalha com um sistema de ícones próprio, o que facilita muito o nosso trabalho. Dentro do código utilizamos a diretiva ng-repeat, que gera a criação de layouts para cada item de uma lista, neste caso, para cada item e subitem do menu.

As diretivas do Angular Js são tags e propriedades HTML que geram determinadas regras de negócio (definidas em arquivos .js) quando utilizadas. O angular possui diversas diretivas próprias e também provê a funcionalidade de criação de diretivas personalizadas.

Utilizamos um sistema de rotas para trabalhar com os links do menu. Cada item do menu leva a uma determinada url e o Angular possui um Listener ($routeProvider) que verifica qual url está sendo acessada e carrega o controlador referente aquela tela:

2-codigo-menu-lateral-eng-dtp-multimidia

Esta configuração de rotas é definida no arquivo app.js localizado na raiz da aplicação e geralmente é utilizada em toda aplicação Angular Js. O arquivo app.js também define as dependências e as configurações globais da aplicação.

Barra superior

barra-superior-eng-dtp-multimidia

A barra superior também possui um arquivo de layout próprio e é fixa em todo o aplicativo:

barra-superior-eng-dtp-multimidia

Utilizamos as classes do bootstrap (embutido no Angular) para gerar uma top bar responsiva. Através de um controlador localizamos o usuário logado utilizando a função getCurrentUser() (definida no objeto $scope) e imprimimos suas informações na tela.

O Angular trabalha com um sistema chamado Two Way Binding, este sistema permite que as variáveis adicionadas ao objeto $scope através dos controladores possam ser acessadas e modificadas através das páginas .html . Desta forma não precisamos nos preocupar em como acessar os dados criados através dos controladores em nossas páginas html.
Para acessar uma variável definida pelos controladores dentro do html usamos a seguinte sintaxe:

{{variavel}}

Por exemplo, caso queiramos definir um layout para exibir os dados do usuário, definidos dentro do objeto $scope.usuário, podemos utilizar o seguinte código:

Nome: {{usuario.nome}}

Email: {{usuario.email}}

Telefone: {{usuario.telefone}}

Celular: {{usuario.celular}}

Este mesmo comportamento ocorre quando utilizamos campos de formulários, ao editar os campos vinculados às variáveis de escopo, elas são automaticamente atualizadas nos controladores.


Conteúdo da página

conteudo-da-pagina-eng-dtp-multimidia

O conteúdo da página é onde colocamos as informações referentes a página que o usuário está acessando.

Caso o usuário acesse outra página, a sidebar e a barra superior continuam estáticas:

barra-estatica-eng-dtp-multimidia


O layout da página de Painel de controle é bem minimalista: utilizamos o sistema de grid (col) do bootstrap para gerar duas colunas principais, cada uma com 50% da largura da tela (col-md-6) e carregamos seus respectivos widgets em cada uma das colunas.

 

painel-de-controle-eng-dtp-multimidia

O Widget de calendário vem de uma biblioteca fornecida por usuários do Angular JS (o Angular Js possui uma extensa gama de plugins). As telas de tarefa e nota são inseridas através de diretivas customizadas que geram as visualizações das tarefas e notas do usuário.

O controlador por trás da tela de Painel de controle também é relativamente simples:

controlador-eng-dtp-multimidia

Adicionamos variáveis ao objeto $scope para que essas variáveis possam ser acessadas através do nosso arquivo .html.

Nesta tela carregamos cada lista de dados (tarefas, notas) através de seus respectivos serviços. No contexto do Angular, os serviços  atuam como Dao’s, provendo dados de bancos de dados, arquivos ou dados na nuvem. No caso do Gerenciar Negócio estamos acessando os dados na nuvem através de uma api RESTful.

Esta foi a nossa introdução a Angular JS. Como visto no tutorial, o angular permite criar sistemas web responsivos utilizando uma série de recursos avançados provenientes da ferramenta.

Gostou deste conteúdo?




 

 

Renato Probst

Renato Probst

Renato Policeno Probst – Formado em Sistemas para Internet, com especialização em Aplicativos Móveis e Computação em Nuvem. Experiência com diversas linguagens de programação voltadas para desenvolvimento mobile (Android, Swift, Cordova, Ionic, SQLite) e desenvolvimento web (PHP, HTML5, CSS, Javascript, mySQL, RESTful).

Possui em seu portfólio mais de 12 aplicativos publicados, entre eles aplicativos para venda e classificado de veículos, CRMs, aplicativos para streaming de áudio, jogos, POS, guia de serviços, entre outros.

Também possui em seu portfólio sites e apis em tecnologia RESTful. Atua atualmente como instrutor na ENG, onde ministra cursos de desenvolvimento mobile, já tendo ministrado cursos para empresas como Grupo RPC, Prodesp, Banco do Brasil, SENAI e TRE, além de dezeas de alunos nos laboratórios da ENG SP, PR e DF.

ENG DTP & Multimídia - Logo

 

 

ENVIE SEU CONTATO e SEUS COMENTÁRIOS


LinkedIn da ENG DTP Multimídia
     Facebook da ENG DTP Multimídia     Instagram da ENG DTP Multimídia

 Jornad Graphic Design