Cartão Pessoal em NPX?! Ô loco meu!

Meu cartão pessoal feito em NPX! :)

Lembra o que eu falei com vocês que estarei escrevendo posts de coisas legais que há no mundo da programação?! Eis aí, algo que aprendi e quero muito compartilhar com todos vocês! E vou ensinar passo a passo a todos vocês como criar o seu cartão pessoal via NPX para mostrar para todos no seu trabalho, amigos, palestras… enfim..

Mas, antes de começar, querem ficar por dentro dessa e de outras novidades super legais?! Se a sua resposta for sim, então não deixem de nos seguir no twitter para ficarem por dentro de vários outros posts legais como esse e ficar por dentro de outros assuntos como: eventos, empoderamento feminino, palestras, dicas de carreira — tudo voltado para área de tecnologia e para nós mulheres!

WoMakersCode - Protagonismo Feminino na Tecnologia (@womakerscode) | Twitter

Ah! E claro, não deixem de me seguir lá no twitter também! Até porque tou preparando muita coisa legal para esse ano de 2019 em: vídeos tutoriais, live stream, posts e dicas. É tanta coisa legal que estou preparando que eu tenho certeza que vocês não vão querer perder nenhuma delas! 😎

Glaucia Lemos (@glaucia_lemos86) | Twitter

Agora que vocês já estão nos seguindo… Vamos nessa?!

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
• Node.js
• Npm (criar uma conta pessoal no site npmjs.com)

Uso de pacotes:

• Boxen
• Chalk
• Standard
• Commander
• EsLint

É 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
> 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:

package.json file

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

Estrutura do projeto

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

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:

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

Se desejarem contribuir ou ajudar a melhorar esse cartão não deixem de abrir issues no repositório, beleza?

E mais uma vez, não deixem de me seguirem lá no twitter para saberem das últimas novidades. E também no meu canal do Youtube. Lá estou desenvolvendo uma nova série de Tutorial CRUD MEAN com Angular 7. E está imperdível!

Glaucia Lemos (@glaucia_lemos86) | Twitter

Até a próxima pessoal!! ❤️ ❤️ ❤️