O ES NA PALMA DA MÃO é um programa do Governo do Estado do Espírito Santo que reúne iniciativas e serviços do Governo em plataforma móvel (aplicativo) e web, com unidade de experiência do cidadão. Por meio do ES NA PALMA DA MÃO, diversos serviços governamentais podem ser acessados através da web e dispositivos móveis (sistemas operacionais iOS e Android) utilizando uma interface comum.

Apresentação @ Slideshare

==================================================================================

• Tecnologias utilizadas
  • Typescript
  • angularJS (1.x.x)
  • UI-Router
  • Ionic (1.x.x)
  • webpack
  • Gulp
• Gerando componentes

Essas são as principais ferramentas, frameworks e libraries que dão suporte ao projeto:

TypeScript é uma linguagem para desenvolvimento JavaScript em larga escala. Com TypeScript podemos escrever código utilizando uma estrutura fortemente tipada e ter este código compilado para JavaScript puro. Nem todas as features do ES2105 já são suportados pelos browsers. TypeScript permite desfrutar de todas as novas características da linguage hoje, covertendo código ES2105 em código equivalente em ES5. Qualquer navegador. Qualquer host.

angularJS é um framework estrutural para aplicações web dinâmicas.

O Router nativo do Angular vem com uma série de limitações, como por exemplo a ausência de suporte para views aninhadas. UI Router permite essa e muitas outras facilidades, e por isso tem se tornado, de fato, o router padrão das aplicações Angular.

Ionic é um framework que visa a criação de aplicações híbridas para dispositivos móveis. Ele nada mais é do que uma pilha de componentes e outros frameworks como angularJS e ui-router.

webpack é um empacotador de módulos (javascript e cia) que cria bundles de assets à partir das dependências(assets) do projeto.

1. Permite fazer o pré-processamento de arquivos “diferentes” (coffee, es6, ts, sass, less, jade, imagens, etc) que os tornam “utilizáveis” através de função require() ou import(ES2015);
2. Possibilidade de carregar dependências sob demanda (code splitting), sem precisar colocar tudo num grande e pesado bundle.

O automatizador de tarefas de build da aplicação.

Devido à previsibilidade proporcionada pela estrutura de diretórios consistente do projeto, podemos usar as tasks automatizadas para gerar componentes com a seguinte estrutura:

⋅⋅⋅⋅⋅⋅componentName/
⋅⋅⋅⋅⋅⋅⋅⋅componentName.module.ts               // modulo que registra o componente no angular
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.ts            // ponto de entrada do componente (carrega todas as dependências)
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.controller.ts // controller do component
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.specs.ts      // unit tests do component
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.html                    
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.css           // css com style que se aplica somente ao componente

Para gerar um componente, execute yarn component -- --name componentName para componentes que representam rotas(routed components) ou yarn state -- --name componentName para gerar componentes simples.

O parâmetro que segue o flag --name é o nome do componente a ser criado. Certifique-se de que é único ou então o componente gerado substituirá o componente preexistente identicamente-nomeado.

O componente será criado, por padrão, dentro da pasta src/app. Para alterar isso, aplique o flag --parent, seguido por um caminho relativo a src/app.

Por exemplo, executando yarn component -- --name login --parent auth irá criar um componente src/app/auth/login.

Executando yarn component -- --name footer --parent common, será criado um componente footer dentro src/common.