Imagine a seguinte situação: Você está desenvolvendo uma certa funcionalidade para o seu software e encontra um pacote npm que promete resolver todos os seus problemas. Normalmente quando isso acontece, entramos na documentação do projeto para entender direitinho como instalar e utilizar.

Agora imagine se fosse possível testar este pacote antes de colocá-lo como dependência dentro do seu projeto (ou mesmo ter que criar um segundo projeto em paralelo só para testar). Isso não seria incrível? Pois bem, já é possível fazer isso através do npm Runkit, o assunto do nosso artigo.

Conheça o RunKit

Com o próprio site oficial define, o npm RunKit é um playground para testar código. Ele executa um ambiente Node.js completo com todos os 400.000 pacotes do npm já pré-instalados, incluindo o próprio npm.

A sua utilização é simples e gratuita, seguindo somente algumas diretrizes:

  • Todos os documentos do RunKit são públicos
  • Para utilizar os pacotes, basta usar o require()
  • É possível utilizar arrow functions, classes, template string e a maior parte das funcionalidades do ES6

Se você ainda não está craque no ES6, dá uma olhada no nosso curso completo com preço promocional e mais de 6 horas de conteúdo!

  • Devemos usar await em qualquer Promise, ao invés de usar callbacks (há este exemplo como referência)

Sua utilização não exige cadastro, mas com ele podemos criar trechos de códigos em Node.js que são embeddables.

Vamos dar uma olhada em seu funcionamento.

Testando tudo diretamente pelo browser

O primeiro passo é acessar o site oficial. Ao acessa-lo, você cairá nesta página:

Home page do Runkit

Podemos já fazer os testes nesta própria página, mas recomendo que você se cadastre para poder aproveitar todas as funcionalidades (basta clicar no botão Sign Up for Free e utilizar a sua conta do GitHub).

Ao se cadastrar, você cairá na página chamada My First Playgroud. Lá já vamos ter um código que nos dá uma boa ideia do que o RunKit é capaz.

O primeiro ponto bacana que devemos reparar é que podemos pegar informações sobre o processo em que nosso código está sendo executado. Notem que o process.version é v8.10.0 (versão do Node.js). Aproveitando este exemplo, podemos verificar quais são as propriedades do objeto process. O RunKit organiza as informações de forma bastante agradável para leitura (muito semelhante ao que os browsers fazem nos respectivos consoles):

Resultado do console.log() de um objeto no RunKit

O segundo ponto interessante é o botão + add library… que fica ao lado da área de código. Ao clicá-lo, podemos fazer a busca de pacotes por nome. O bacana é que a busca é inteligente e traz resultados de acordo com o que você vai digitando. Por exemplo, vamos procurar pelo pacote async-get-json. Assim que eu digitar “async”, uma série de resultados já são retornados, sendo que cada um também já mostra seus dados da página oficial do repositório:

Pesquisa de pacotes npm no RunKit

Bem prático, não é mesmo? E uma vez que importamos o pacote para o código, sua versão fica marcada visualmente como referência:

Require de pacotes npm

No exemplo, fazemos o require do pacote async-get-json para que, assim como o próprio nome já revela, fazermos uma requisição GET que nos retorna um JSON. Na linha 8 notem que o await é utilizado (como orientado na diretriz).

Com a resposta desta API em mãos, conseguimos ver outro ponto interessante. A propriedade iss_position da API é uma coordenada (latitude, longitude). O RunKit possui uma inteligência que entende que isso é uma coordenada e utiliza o Leaflet para renderizar esta posição em um mapa.

Outras funcionalidades que vale a pena citar

O RunKit é bem completo e nos oferece mais algumas outras opções para brincar. Por exemplo, a maioria das APIs requerem uma chave única. Como o código é público, não faz o mínimo sentido expor ela. Para resolver isso, podemos cadastrar esta chave em uma variável de ambiente, na tela de Enviroment Settings:

Tela de configurações de ambiente

Ainda falando em APIs, também podemos criar APIs dentro do RunKit. Para isso, utilizamos o objeto Endpoint. Basta implementarmos uma função que recebe uma request e uma response como argumentos*.

Aproveite este gancho também ler o nosso artigo “O mundo além do Express.js”.

Feito isso, o RunKit nos gera uma URL que reflete em tempo real a resposta da nossa API. Vejam só:

Fora tudo isso, também podemos:

  • Configurar como os pacotes aparecem no RunKit
  • Criar “Custom Viewers” (como o mapa, por exemplo)
  • Criar um embed do seu código

Tudo isso e muito mais está documentado aqui.

Conclusão

Se você quer conhecer novas bibliotecas e testá-las antes de colocar elas como dependência dos seus projetos, o npm RunKit é o cara ideal. Além de ser gratuito, oferece todo o ambiente Node.js no próprio navegador, com funcionalidades como busca em tempo real que facilitam muito a nossa vida.

Referências


Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.brFacebook, Twitter, Youtube

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Diego Martins de Pinho

Written by

Desenvolvedor de Software, Fundador da CodePrestige e autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade