Configurações básicas para o desenvolvimento de aplicações modernas para iniciantes

O exemplo apresentado aqui, tem o objetivo de demonstrar um caminho para configurar um ambiente de desenvolvimento até o ponto em que você consegue visualizar uma página html no navegador com suporte a biblioteca AngularJS.

Neste tutorial, você vai utilizar o Visual Studio Code (VSCode) como editor de código e console de comandos para instalação das bibliotecas JavaScript necessárias para criar aplicações utilizando AngularJS.

Pré-requisitos

Inicialmente é necessário ter instalado o NodeJS e uma IDE ou editor de código de sua preferência. Este tutorial foi criado com o Visual Studio Code que é multiplataforma e oferece recursos comuns para edição, debug, extensões, entre outros.

Acesse http://nodejs.org e repare que a página identifica o sistema operacional que você está utilizando, e disponibiliza links para download da versão estável (LTS) ou a mais atual. A versão que você vai escolher depende dos seus objetivos. Por exemplo, caso queira criar um aplicativo mais estável que utiliza recursos amplamente testados pela comunidade, utilize a versão LTS. 

O Visual Studio Code pode ser baixado para diferentes sistemas operacionais em https://code.visualstudio.com/download. 

Crie uma pasta para seu projeto

Projetos de aplicações modernas baseadas em JavaScript são definidos a partir de uma estrutura de diretórios que pode variar um pouco em relação ao tipo de aplicação que está sendo desenvolvida. Para nosso exemplo, crie uma pasta de nome basic-demo1.

Abra a pasta basic-demo1 no VSCode, utilizando o comando "Open Folder..." no menu File, e em seguida adicione o arquivo index.html com o código ilustrado abaixo. 

arquivo-index-html-basic-demo1.png

A parte de baixo da imagem acima, mostra o painel TERMINAL com o console de comando na pasta do projeto, dispensando os desenvolvedores de alternar continuamente entre o editor do código do projeto e o console.

O console do VSCode será utilizado para instalação e configuração de módulos utilizados e para executar o seu aplicativo no navegador.

Para abrir e fechar o console no VSCode, utilize as teclas de atalho Ctrl + ' (tecla com aspas simples e duplas localizada abaixo da tecla Esc).

Instale a extensão Bower 

Entre com o comando abaixo para instalar o gerenciador de pacotes Bower que faz o rastreamento das dependências entre diferentes bibliotecas e funcionalidades. 

$ npm install bower

O objetivo é instalar Bower e depois utilizá-lo para adicionar e gerenciar as demais bibliotecas, tais como Angular, Bootstrap, etc.

Instale a biblioteca AngularJS utilizando Bower 

Como mencionado acima, depois de instalado, utilizamos o comando abaixo para fazer com que o Bower instale e gerencie a biblioteca Angular.

$ bower install angularjs

Uma pasta denominada bower_components é adicionada ao projeto. Cada biblioteca instalada através do Bower possui um subdiretório nesta estrutura.

estrutura-pastas-bower_components-basic-demo1.png

Instale a biblioteca Bootstrap utilizando Bower

Semelhante ao que foi feito para instalar a biblioteca AngularJS, o comando abaixo ilustra a instalação da biblioteca Bootstrap para Angular.

$ bower install angular-bootstrap

Depois de concluída a instalação, haverá uma pasta angular-bootstrap que poderá ser referenciada nas páginas html.

Instale a extensão Yeoman para gerenciar Scaffold 

Scaffold é o processo de geração automática de modelos para diferentes tipos de projeto. O comando abaixo exemplifica a instalação da biblioteca Yeoman.

$ npm install yo

Instale o gerador flathtml para Yeoman

Em nosso exemplo, o objetivo é demonstrar a utilização do Yeoman para fazer o scaffold de um projeto html simples. O flathtml é um exemplo de gerador que produz um scaffold contendo apenas as tags html básicas para uma página web.

$ npm install generator-flathtml

Execute o Yeoman para gerar o scaffold a partir do gerador flathtml 

Para utilizar o flathtml e gerar o scaffold, digite o comando abaixo na pasta onde deseja que o template seja criado.

$ yo flathtml

Veja abaixo, uma ilustração do html gerado pelo scaffold do gerador flathtml.

html-htmlflat-generator-basic-demo1.png

Inclua uma referência para biblioteca AngularJS no arquivo index.html

Anteriormente instalamos o Bower seguido pela biblioteca angular-bootstrap. Observe que esta ação, gerou uma pasta bower_components que armazenar todas as bibliotecas instaladas com Bower, por exemplo, a biblioteca angularjs e angular-bootstrap. Depois de criadas as respectivas pastas, podemos referenciar os arquivos angular.min.js e bootstrap.min.css como ilustrado nas linhas 6 e 14 abaixo.

arquivo-index-html-2-basic-demo1.png

Observe que inserimos a referência para os estilos no cabeçalho do site, mas as referências aos scripts foram colocadas no final da página, para garantir que a estrutura html e estilo sejam carregados imediatamente para o visitante do site e então os scripts carregados e executados. O arquivo index.js referenciado na linha 15 será criado a seguir.

Crie um arquivo index.js com uma função anônima auto executável (IIFE - Immediately Invoked Function Expression)

O arquivo index.js contém uma função JavaScript anônima e auto executável que declara o modo 'use strict' para evitar diferentes tipos de problemas relacionados ao escopo de variáveis. Na linha 3, definimos uma variável app como uma instância do módulo principal da aplicação, basicdemo1. 

Veja o código do arquivo index.js abaixo.

arquivo-index-js-basic-demo1.png

Em nosso exemplo, temos um único controller contendo a função popup. Para simplificar, estamos criando este controller no mesmo arquivo em que definimos a instância Angular na variável app, mas a recomendação geral é utilizar um componente (controller, factory, etc.) por arquivo .js. 

Para saber mais sobre as melhores práticas para a criação de aplicações Angular, recomendo a leitura do guia produzido pelo John Papa em https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md.

No arquivo index.html inclua uma diretiva ng-click em um botão, como ilustrado na linha 12 abaixo:

ng-click-html-basic-demo1.png

Na ilustração acima, observe que a diretiva utilizada no início do arquivo html (ng-app) define o escopo e opcionalmente, dados para sua aplicação. Leia mais sobre a diretiva ng-app em https://docs.angularjs.org/api/ng/directive/ngApp.

Em nosso exemplo, a diretiva ng-controller foi inserida na tag body e é responsável pela lógica relacionada a interação do usuário com os elementos da interface gráfica por exemplo. Desta forma, todos os elementos dentro da tag body podem utilizar os métodos do controller PopupController.

A diretiva ng-click incluída no elemento button (linha 12 da ilustração acima) contém a chamada para o método popup() do nosso controller. Repare que nosso controller PopupController foi abreviado para popupCtrl.

Relevante observar que a tag h1 na linha 10, contém uma expressão simples de concatenação, apenas para confirmar que o Angular está configurado adequadamente.

Execute o comando http-server para ativar o servidor web nativo do NodeJS

O próximo passo é utilizar um servidor web inicializado através do NodeJS, para visualizar o resultado do seu código no navegador. 

O NodeJS disponibiliza nativamente um servidor web que pode ser ativado com o comando a seguir. Antes de executar o http-server, verifique se o prompt de comando mostra a pasta onde está o arquivo index.html.

$ http-server

Observação: No Linux é necessário instalar o pacote nodejs-legacy (ilustrado abaixo) antes de executar o http-server.

$ sudo apt install nodejs-legacy

Veja a modificação feita no arquivo index.html:

console-http-server-basic-demo1.png

Repare o status de ativo do http-server e o respectivo URL de acesso local no console (TERMINAL) exibido na parte de baixo da ilustração. Clique no link http://127.0.0.1:8080 no console para exibir o arquivo index.html no navegador. Veja o resultado a seguir:

resultado-navegador-basic-demo1.png

Para concluir, quero lembrar que o objetivo deste texto é apresentar um passo a passo para iniciar um projeto de aplicação moderna utilizando a biblioteca AngularJS para o front-end, o Bower para gerenciar a instalação e dependências de bibliotecas, o Yeoman para acoplar e executar o gerador de scaffold htmlflat, e o http-server para executar nosso aplicativo. Além disto, utilizamos o Visual Studio Code como IDE para o desenvolvimento.


Referências

Artigo sobre diferentes aspectos relacionados ao strict mode do javascript
http://cjihrig.com/blog/javascripts-strict-mode-and-why-you-should-use-it/

Referência da API para angular.module
https://docs.angularjs.org/api/ng/function/angular.module

Bootstrap guide
https://docs.angularjs.org/guide/bootstrap

Sobre controllers
https://docs.angularjs.org/api/ng/directive/ngController

Recomendações de melhores práticas e padrões
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md





Eryx Guimarães

Eryx Guimarães desenvolve e mantém soluções para empreendimentos na web.

Entre em Contato

Contato