Cartão Pessoal em NPX - É Possível?!

Jan 21, 2019

A resposta para a pergunta do título deste artigo é: sim. E teremos um passo a passo ensinando a criar um em NPX.

Como surgiu a ideia?

Essa ideia surgiu de um artigo do meu amigo Tierney Cyren, que é Senior Cloud Developer Advocate da Microsoft e membro do comité do Node.js Foundation. Recomendo seguir o Tierney no Twitter – de vez em quando ele posta coisas muito bacanas.

Todo crédito a ele, que criou esse projeto! Graças ao seu trabalho, vários desenvolvedores que o seguem no Twitter começaram a criar os seus próprios NPX Personal Cards. E, claro, eu criei o meu também, como podem ver no começo do artigo.

Querem aprender a criar um parecido? Vamos lá!

O que preciso para Desenvolver um Cartão Pessoal em NPX?

Recursos Usados:

  • Visual Studio Code
  • JavaScript
  • Node.js
  • Npm (criar uma conta pessoal no site npmjs.com)

Uso de Pacotes:

  • Boxen
  • Chalk
  • Standard
  • Commander

É muito importante que você – antes de começar a criar seu cartão – crie uma conta pessoal no site do npmjs.com.

Criando um Cartão Pessoal

Vamos ao passo a passo. A primeira coisa que precisamos fazer é criar uma pasta do projeto de acordo com o seu nome do GitHub e digitar os seguintes comandos no prompt de comando (incluindo, claro, o seu nome): 

> mkdir glaucia86
> cd glaucia86
> npm init
> mkdir bin
> touch card.js

Depois que criar a estrutura do projeto, abra o prompt de comando novamente e digite o comando abaixo (dentro da pasta do projeto) para criar o arquivo package.json: 

> npm init

Em seguida, basta instalar os pacotes necessários para começarmos a desenvolver nosso Cartão Pessoal. Digitem os comandos abaixo: 

> npm install standard --save-dev
> npm install chalk --save
> npm install boxen --save
> npm install commander --save

Ao fazer isso estaremos instalando como Dependencies, os pacotes: chalk, boxen, commander, e como DevDependencies: Standard: 

(...)

"dependencies": {
    "boxen": "^2.1.0",
    "chalk": "^2.4.1",
    "commander": "^2.19.0"
  },
  "devDependencies": {
    "standard": "^12.0.1"

A estrutura do seu projeto deverá estar como na imagem abaixo:

Agora abra o arquivo card.js e copie o código abaixo (inclua seus dados):

#!/usr/bin/env node
// Usado para dizer ao Node.js que se trata de uma ferramenta do CLI

// Declarando os módulos:
const chalk = require('chalk')
const boxen = require('boxen')

// Definindo as opções para o ‘boxen’:
const options = {
  padding: 1,
  margin: 1,
  borderStyle: 'round'
}

// Inclusão do Text e mais as definições do ‘chalk’:
const data = {
  name: chalk.white('Glaucia Lemos /'),
  handle: chalk.cyan('glaucia_lemos86'),
  work: chalk.white('Software Developer at HackDev'),
  twitter: chalk.cyan('https://twitter.com/glaucia_lemos86'),
  github: chalk.cyan('https://github.com/glaucia86'),
  linkedin: chalk.cyan('https://www.linkedin.com/in/glaucialemos/'),
  web: chalk.cyan('https://code4coders.wordpress.com/'),
  npx: chalk.white('npx glaucia_lemos86'),
  labelWork: chalk.white.bold('      Work:'),
  labelTwitter: chalk.white.bold('   Twitter:'),
  labelGitHub: chalk.white.bold('    GitHub:'),
  labelLinkedIn: chalk.white.bold('  LinkedIn:'),
  labelWeb: chalk.white.bold('       Web:'),
  labelCard: chalk.white.bold('      Card:')
}

// Aqui será a saída do nosso Cartão Pessoal em NPX:
const newline = '\n'
const heading = `${data.name} ${data.handle}`
const working = `${data.labelWork}  ${data.work}`
const twittering = `${data.labelTwitter}  ${data.twitter}`
const githubing = `${data.labelGitHub}  ${data.github}`
const linkedining = `${data.labelLinkedIn}  ${data.linkedin}`
const webing = `${data.labelWeb}  ${data.web}`
const carding = `${data.labelCard}  ${data.npx}`

// Aqui devemos colocar toda a nossa saída numa única variável para que possamos usar
// o ‘boxen de maneira efetiva:
const output = heading + newline + newline + working + newline + twittering + newline + githubing + newline + linkedining + newline + webing + newline + newline + carding

console.log(chalk.green(boxen(output, options)));

Agora executaremos o comando abaixo para verificar a versão do npm (nesse momento é muito importante possuir uma conta no site npmjs.org): 

> npm version major

Após verificar a versão do npm, vamos executar um outro comando:

> npm adduser

E então publicaremos o nosso pacote para o site do npmjs. Para isso, basta executar o comando abaixo: 

> npm publish

Depois de publicar, execute o comando a seguir para visualizar o cartão criado: 

> npx glaucia_lemos86

Se tudo der certo, na janela do prompt aparecerá o seu Cartão Pessoal em NPX, conforme na imagem abaixo (fiz alterações no meu card):

Simples, não é mesmo?

Se quiserem fazer de maneira colorida, assim como eu, basta acessar meu código no repositório.

Conclusão

Vocês podem criar da maneira que acharem melhor. E se quiserem dar uma olhada no código desenvolvido, acessem este link.

Caso queiram ver o meu cartão de maneira local em suas máquinas, já está liberado no npmjs. Basta digitar o seguinte comando: 

> npm install glaucia_lemos86

Quer contribuir ou ajudar a melhorar esse cartão? Não deixe de abrir issues no repositório, beleza?

Até a próxima pessoal! 😍😍