NPM

Tw Dev Server – como ele pode te ajudar a estudar programação?

Olá Web Developers! Vamos ver o que é e como utilizar o Tw Dev Server para te ajudar na hora de estudar programação.

O que é o Tw Dev Server?

Quando estamos trabalhando com desenvolvimento web precisamos de pelo menos um servidor de arquivos estáticos para nossos arquivos HTML, CSS, JavaScript, imagens, etc. Isso porque se abrirmos nosso HTML diretamente no navegador, certas operações não poderão ser feitas pelo JavaScript por questões de segurança.

Além disso, também é comum a necessidade de uma API para fazermos requisições, onde recuperamos ou salvamos dados quando estamos estudando desenvolvimento web ou criando um aplicativo mobile.

Para que essas necessidades básicas fossem resolvidas surgiu o Tw Dev Server. Ele veio com a finalidade de iniciar um servidor estático para nossos arquivos e também servir como um servidor que recebe requisições através de uma API. Com essa API podemos simular um servidor com banco de dados que recebe requisições para recuperar, salvar, modificar e apagar dados (CRUD). E tudo isso sem precisar de nenhuma configuração ou instalação complicada!

Tw Dev Server - tela de desenvolvimento com navegadores sendo atualizados automaticamente

Instalando o Tw Dev Server

O Tw Dev Server pode ser baixado pelo NPM ou como uma extensão do VS Code.

No NPM, para instalar globalmente em sua máquina, execute:

$ npm install -g @treinaweb/tw-dev-server

Assim que você tiver instalado, seu terminal terá o comando tw-dev-server disponível.

Iniciando um servidor de arquivos estáticos

Para iniciar um servidor de arquivos estáticos basta abrir o seu terminal na pasta raiz do seu projeto e executar:

$ tw-dev-server

Com isso nós já teremos nosso servidor rodando.

Tw Dev Server - Terminal

Assim como você pode ver na imagem acima, ele irá mostrar como você pode acessar seus arquivos pelo navegador. Na mesma máquina basta acessar http://localhost:3002. Entretanto, caso queira acessar de outra máquina ou dispositivo que estejam na mesma rede, basta acessar o endereço que é mostrado logo abaixo.

Como se pode notar, ele utiliza por padrão a porta 3002, mas isso pode ser alterado. Por exemplo, caso a gente queira utilizar a porta 4200:

$ tw-dev-server --port=4200

Para encerrar basta pressionar Ctrl + C.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Live Reload e Browser Sync

Quando estamos escrevendo nosso HTML, CSS e JavaScript, pode ser meio cansativo ter que ficar atualizando o navegador a todo momento para ver o resultado do nosso trabalho.

Para isso o Tw Dev Server também possui a funcionalidade conhecida como Live Reload. Com essa função ativada, seu navegador vai atualizar automaticamente assim que você alterar algum arquivo HTML ou JavaScript. Caso a alteração seja em um arquivo CSS, o CSS da página é atualizado mesmo sem precisar atualizar o navegador.

Para ativar essa função, basta adicionar --live ao comando.

$ tw-dev-server --live

Além disso, também há a possibilidade de você querer testar sua página em vários navegadores, dispositivos ou tamanhos de janelas diferentes. E para facilitar isso temos a função Browser Sync, que vai sincronizar todos os navegadores que estiverem acessando a sua página.

Com isso você pode acessar a sua página a partir de vários navegadores, até mesmo do seu celular, e tudo o que você fizer em um navegador (como escrever, clicar num botão ou rolar a página) também acontecerá nos demais navegadores! Essa função também atualiza todos os navegadores quando você altera o seu código, não precisando ativar o --live.

Para ativar o Browser Sync basta adicionar --sync ao comando:

$ tw-dev-server --sync

Fazendo Requisições

Uma das principais funcionalidades do Tw Dev Server é disponibilizar uma API para podermos fazer requisições. E isso sem precisar configurar um back end ou um banco de dados. Porém, lembre-se que essa é uma ferramenta para facilitar nos estudos, portanto não deve ser usada para um produto que será lançado, pois não é otimizada para isso.

Podemos fazer operações GET, POST, PUT e DELETE. Para que possamos fazer requisições para a API, basta adicionar /api ao final do endereço que utilizamos para acessar os arquivos estáticos.
Em resumo, se você acessa os arquivos por http://localhost:3002, as requisições devem ser feitas a http://localhost:3002/api.

Logo após o /api nós adicionamos os nomes que quisermos. Isso será para nos organizarmos.

Painel Visual do Tw Dev Server

Para testar as requisições, ver seus dados, modificá-los, etc, você pode usar a ferramenta visual do Tw Dev Server. Basta acessar https://treinaweb.github.io/tw-dev-server/. Uma vez que o seu servidor estiver rodando, a bolinha ao lado do endereço aparecerá verde.

Tw Dev Server - Painel

Criando Dados

Imagine que a gente esteja num projeto de biblioteca e que queremos fazer uma operação POST para salvar um livro. Podemos, por JavaScript, fazer uma requisição com o seguinte código:

    let livro = {
        "nome": "GraphQL: A revolucionária linguagem de consulta e manipulação de dados para APIs",
        "autor": "Akira Hanashiro"
    };
    fetch('http://localhost:3002/api/biblioteca/livros', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(livro)
    })
    .then(response => response.json());
    .then(console.log)

Teremos como resposta um objeto com um campo id para identificar o dado recém cadastrado. Ele é gerado automaticamente pelo Tw Dev Server.

Não apenas por JavaScript, como também podemos fazer essa operação pela nossa ferramenta visual:

Tw Dev Server - Post

Buscando Dados

Para fazermos uma requisição GET e recuperar todos os livros, bastaria fazer:

    fetch('http://localhost:3002/api/biblioteca/livros')
        .then(response => response.json());
        .then(console.log)

E, claro, também podemos fazer isso na nossa ferramenta visual.

Porém, caso você queira que seja retornado apenas um único dado, pode-se passar o id do elemento. Por exemplo: http://localhost:3002/api/biblioteca/livros?id=1591291655803.

Atualizando Dados

Para atualizar um dado basta fazer uma operação PUT, usar a mesma URL e indicar nela o id do dado que você quer atualizar:

    let novoLivro = {...};
    fetch('http://localhost:3002/api/biblioteca/livros?id=1591291655803', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(novoLivro)
    })
    .then(response => response.json());
    .then(console.log)

Assim que executar essa requisição teremos como resposta o dado atualizado.

Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

Apagando Dados

Por fim temos a função de apagar dados. Para isso basta fazer uma requisição DELETE passando o id do dado que se quer apagar.

    fetch('http://localhost:3002/api/biblioteca/livros?id=1591291655803', {
        method: 'DELETE',
    })
    .then(response => response.json());
    .then(console.log)

Caso você queira apagar todos os dados de uma coleção, basta passar all no lugar do id

    fetch('http://localhost:3002/api/biblioteca/livros?id=all', {
        method: 'DELETE',
    })
    .then(response => response.json());
    .then(console.log)

Em conclusão, o Tw Dev Server é uma ótima ferramenta que pode se aliar aos seus estudos em desenvolvimento web e mobile, seja servindo arquivos ou simulando um back end com api e banco de dados. Também pode ser usado para fazer testes caso você esteja desenvolvendo um front mas o back end ainda não tem uma api pronta para te retornar dados.

O que é gerenciador de dependências?

Ao longo dos anos, houve uma grande evolução no desenvolvimento das aplicações. Algo muito comum há vinte anos, hoje é impraticável. No passado, quando era preciso, por exemplo, acessar um banco de dados, o desenvolvedor programava todos os aspectos desta conexão ou copiava (basicamente um copy-paste) de alguém que já implementou isso.

Esta dinâmica de “copiar-colar” o código, evoluiu para a “copia” de pacotes. No lugar de copiar o código fonte diretamente, o desenvolvedor passou a obter pacotes que continham os códigos que necessitava, como para o acesso ao banco. Esses pacotes eram adicionados manualmente no projeto que estivesse desenvolvendo.

O problema desde cenário é que se um pacote copiado fosse alterado, por qualquer motivo, o desenvolvedor precisaria repetir todo o procedimento de adição do pacote no projeto. Claro que também precisava ficar atento para saber se o pacote foi alterado ou não.

Com o tempo, os pacotes passaram a serem mais utilizados, o que tornou este gerenciamento manual impraticável. Vindo ao resgaste disso, surgiram os gerenciadores de pacotes, também chamados de gerenciador de dependências. Essas ferramentas realizam automaticamente os procedimentos que os desenvolvedores faziam manualmente. Delegando o gerenciamento dos pacotes de um projeto, o desenvolvedor pode focar no que é mais importante, o desenvolvimento da aplicação que está criando.

Npm - Gerenciador de pacotes para JavaScript
Curso de Npm - Gerenciador de pacotes para JavaScript
CONHEÇA O CURSO

Mas o meu projeto é pequeno, preciso de um gerenciador de dependência?

Durante a criação de uma aplicação, não importa qual seja o seu tamanho, pacotes são adicionados para agilizar o desenvolvimento, mantê-la coesa e evitar a “reinvenção da roda”. Porque criar algo do zero, se outro desenvolvedor já implementou o mesmo procedimento?

Mesmo havendo a possibilidade de adicionar um pacote manualmente, este também pode fazer uso de outro pacote. Neste cenário, trabalhando de maneira manual, mesmo requerendo apenas um pacote, o desenvolvedor precisará se preocupar com dois.

Entretanto, não há garantias que será apenas uma dependência. O segundo pacote pode necessitar de outros e assim por diante, gerindo um complexo grafo de dependências.

Logo vemos que o projeto possui muitas dependências, o que não é ruim, mas gerencia-las manualmente se torna complicado ou mesmo impossível:

É neste momento que os gerenciadores de dependências são imprescindíveis. Eles gerenciam todas as ações com relação as dependências do projeto: listagem, adição, remoção e atualização. Além de analisar o grafo de dependência e garantir que as dependências dos pacotes utilizados no projeto também sejam obtidas.

Principais gerenciadores de dependência

Atualmente qualquer plataforma de desenvolvimento que se preze possui uma ferramenta que permite a criação, compartilhamento e consumo de códigos entre os desenvolvedores.

Existem várias que se encontram neste quesito, entre as mais populações temos:

  • NPM: Para aplicações web e JavaScript;
  • Yarn: Para aplicações web e JavaScript;
  • Composer: Para aplicações PHP;
  • Maven: Para aplicações Java e Kotlin;
  • Gradle: Para aplicações Java, Groovy, Kotlin, Android, Scala e JavaScript;
  • NuGet: Para aplicações .NET;
  • Pip: Para aplicações Python;
  • Rubygem: Para aplicações Ruby;
  • Mix: Para aplicações Elixir;
  • Hex: Para aplicações Erlang;
  • Cargo: Para aplicações Rust;
  • PEAR Installer: Para aplicações PHP;
  • CPAN: Para aplicações Pear.

Cada gerenciador de dependências possui suas particularidades, mas todos facilitam a vida do desenvolvedor, então saber utilizá-los é algo essencial atualmente. Aqui no nosso blog, já abordamos o Yarn, PIP, NPM e NuGet.

Composer - Gerenciador de dependências para PHP
Curso de Composer - Gerenciador de dependências para PHP
CONHEÇA O CURSO

Devemos abordar os outros gerenciadores em artigos futuros, então fique de olho nas nossas publicações aqui do blog.

10 Truques do NPM – Você conhece todos?

Olá Web Developers!
Se você trabalha com JavaScript, provavelmente já teve que usar o NPM. Mas normalmente as pessoas usam essa ferramenta apenas para baixar bibliotecas ou frameworks.

Vamos ver alguns truques que podemos fazer com o NPM.

Npm - Gerenciador de pacotes para JavaScript
Curso de Npm - Gerenciador de pacotes para JavaScript
CONHEÇA O CURSO

1 – Crie ferramentas executadas diretamente da linha de comando

Com o NPM nós podemos criar ferramentas executadas diretamente do terminal inteiramente com JavaScript.
Já tivemos um post aqui ensinando como fazer isso, que você pode conferir neste link.

2 – Atalhos para os comandos mais comuns

É sempre bom saber o nome curto de um comando, permitindo escrever menos:

ComandoAtalho
installi
listls
testt
--global-g
--save-S
--save-dev-D

3 – Abrir o site do projeto

O comando home permite abrir o site de alguma biblioteca ou framework em seu navegador.

O código abaixo irá abrir o site do jQuery em seu navegador:
$ npm home jquery.

4 – Abrir o repositório do projeto

O comando repo permite abrir o site do repositório de alguma biblioteca ou framework em seu navegador.

O código abaixo irá abrir o repositório do lodash em seu navegador:
$ npm repo lodash.

5 – Procurar por pacotes não declarados no package.json

É um grande problema quando alguém esquece de indicar uma dependência no package.json. Mas não tem problema, pois com o seguinte comando você poderá ver quais são os pacotes utilizados no seu projeto que não estão listados:
$ npm prune

6 – Inicie um pacote rapidamente

O comando $ npm init nos permite iniciar um pacote, criando o arquivo package.json de acordo com certas respostas que damos às perguntas feitas.

Mas você pode pular as perguntas, fazendo com que o arquivo package.json seja criado imediatamente. Basta adicionar -y ao comando:
$ npm init -y

7 – Analisar dependências desatualizadas

Também podemos verificar se há dependências desatualizadas em nosso projeto. Basta executar o comando
$ npm outdated

8 – Trave a versão de suas dependências

Se quiser travar a versão das dependências do seu projeto, simplemente execute o comando
$ npm shrinkwrap

Isso irá criar um arquivo npm-shrinkwrap.json. Ao instalar as dependências do projeto, as versões definidas neste arquivo que serão levadas em consideração.

9 – Instalação de produção

No package.json nós podemos salvar as dependências em dependencies e devDependencies. Esta última é a lista de dependências usadas apenas durante o desenvolvimento.

Caso você não vá desenvolver nada onde está instalando seu projeto, com o seguinte comando é possível instalar as dependências do projeto, ignorando as dependências de desenvolvimento:
$ npm install --production

10 – Lista de pacotes instalados

Podemos ver uma lista de pacotes instalados com o comando:
$ npm ls --depth 0

Esse comando é ainda mais útil quando queremos saber quais módulos globais possuímos instalado em nossa máquina:
$ npm ls -g --depth 0

Conclusão

O NPM é uma ferramenta que muitos usam mas poucos sabem usar totalmente o seu poder. Para mais informações, confira nosso Curso de NPM.

Npm - Gerenciador de pacotes para JavaScript
Curso de Npm - Gerenciador de pacotes para JavaScript
CONHEÇA O CURSO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200