APIs e Microsserviços

7 jul, 2025

Validações mais felizes na sua API com a biblioteca Joi

Publicidade

Para garantir o funcionamento correto das nossas APIs e evitar problemas é super importante sempre validar a entrada dos nossos usuários. No entanto, encadear muitos ifs-elses não é uma estratégia muito eficaz. Será que não há uma forma mais interessante de fazer isso? 🤔

Validações em APIs

  • Para garantir o funcionamento correto das nossas APIs, é importante sempre validar a entrada dos nossos usuários.
  • É possível fazer isso de diferentes formas, como por exemplo, usando condicionais! Como no exemplo abaixo, onde queremos validar se o usuário enviou todos os dados e se eles são válidos:
app.post("/users", (req, res) => {
  const { username, email, year, password } = req.body;

  if(!username || !email || !year || !password) {
    return res.status(422).send("Incomplete data.");
  }

  const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if(!regexEmail.test(email)){
    return res.status(422).send("Invalid e-mail.");
  }
  
  if(isNaN(parseInt(year)) || parseInt(year) <= 1900) {
    return res.status(422).send("Incomplete year.");
  }
  
  if(password.length < 6) {
    return res.status(422).send("Password too short.");
  }

  users.push(req.body);
  return res.sendStatus(201);
});
  • Isso funciona? Funciona!
  • Mas… Quando o nosso código começa a crescer e as regras de valições se tornam mais complexas, facilmente essa solução se torna pouco eficaz. E não precisamos ir muito longe não… Por exemplo, e se eu também quisesse validar se o nome de usuário tem até 10 caracteres e se o e-mail é válido?
  • O suco já começa a azedar, né? 🧃
  • Então como podemos melhorar? 🤔
  • Para isso, podemos usar a biblioteca Joi! Esta é uma biblioteca de validação através de esquemas (schemas) que permite fazer o trabalho acima de forma muito mais fácil e descritiva.
  • Para usá-la, o primeiro passo é instalar ela:
npm i joi
  • Feito isso, precisamos definir um schema. Um schema nada mais será do que a representação da estrutura do que esperamos validar com suas respectivas regras.
  • Para fazer isso, já faremos uso do Joi. Veja:
import joi from "joi";

const userSchema = joi.object({
  username: joi.string().min(3).max(10).required(),
  email: joi.string().email().required(),
  year: joi.number().integer().min(1900).max(2024).required(),
  password: joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}
)).required(), }); app.post("/users", (req, res) => { const user = req.body; if(!username || !email || !year || !password) { return res.status(422).send("Incomplete data."); } // restante do código });
  • Usamos o joi.object() para definir o schema e então usamos o string()email()min()max(), e assim por diante para fazer as validações necessárias.
  • Agora, ao invés de ficar encadeando ifs e elses, simplesmente usamos esse objeto de referência para validar a informação que o usuário nos enviou:
import joi from "joi";

const userSchema = joi.object({
  username: joi.string().min(3).max(10).required(),
  email: joi.string().email().required(),
  year: joi.number().integer().min(1900).max(2024).required(),
  password: joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}
)).required(), }); app.post("/users", (req, res) => { const user = req.body; const validation = userSchema.validate(user, { abortEarly: false }); if (validation.error) { const errors = validation.error.details.map(detail => detail.message) return res.status(422).send(errors) } // restante do código });

Repositório

https://github.com/Professor-DiegoPinho/validacao-joi

)).required(),\r\n});\r\n\r\napp.post(\"\u002Fusers\", (req, res) => { \r\n const user = req.body; \r\n if(!username || !email || !year || !password) {\r\n return res.status(422).send(\"Incomplete data.\");\r\n }\r\n \r\n \u002F\u002F restante do código \r\n});\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cul class=\"\"\u003E\n\u003Cli id=\"340f\" class=\"my mz ho na b nb nc nd ne nf ng nh ni fk nj nk nl fn nm nn no fq np nq nr ns pi pj pk bk\" data-selectable-paragraph=\"\"\u003EUsamos o \u003Ccode class=\"cx qa qb qc pr b\"\u003Ejoi.object()\u003C\u002Fcode\u003E para definir o schema e então usamos o \u003Ccode class=\"cx qa qb qc pr b\"\u003Estring()\u003C\u002Fcode\u003E, \u003Ccode class=\"cx qa qb qc pr b\"\u003Eemail()\u003C\u002Fcode\u003E, \u003Ccode class=\"cx qa qb qc pr b\"\u003Emin()\u003C\u002Fcode\u003E, \u003Ccode class=\"cx qa qb qc pr b\"\u003Emax()\u003C\u002Fcode\u003E, e assim por diante para fazer as validações necessárias.\u003C\u002Fli\u003E\n\u003Cli id=\"3e63\" class=\"my mz ho na b nb pl nd ne nf pm nh ni fk pn nk nl fn po nn no fq pp nq nr ns pi pj pk bk\" data-selectable-paragraph=\"\"\u003EAgora, ao invés de ficar encadeando ifs e elses, simplesmente usamos esse objeto de referência para validar a informação que o usuário nos enviou:\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Eimport joi from \"joi\";\r\n\r\nconst userSchema = joi.object({\r\n username: joi.string().min(3).max(10).required(),\r\n email: joi.string().email().required(),\r\n year: joi.number().integer().min(1900).max(2024).required(),\r\n password: joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30} window.__SERVER_VARS__ = {"applicationRestUrl":"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-json","applicationBaseUrl":"https:\u002F\u002Fadmin.imasters.com.br"} )).required(), }); app.post("/users", (req, res) => { const user = req.body; if(!username || !email || !year || !password) { return res.status(422).send("Incomplete data."); } // restante do código });
import joi from "joi";

const userSchema = joi.object({
  username: joi.string().min(3).max(10).required(),
  email: joi.string().email().required(),
  year: joi.number().integer().min(1900).max(2024).required(),
  password: joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}
)).required(),
});

app.post("/users", (req, res) => { 
  const user = req.body; 
    const validation = userSchema.validate(user, { abortEarly: false });
   if (validation.error) {
     const errors = validation.error.details.map(detail => detail.message)
     return res.status(422).send(errors)
   }
  
  // restante do código 
});

Repositório

https://github.com/Professor-DiegoPinho/validacao-joi

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Diego Pinho

edit113 Artigo(s)

Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.

)).required(),\r\n});\r\n\r\napp.post(\"\u002Fusers\", (req, res) => { \r\n const user = req.body; \r\n const validation = userSchema.validate(user, { abortEarly: false });\r\n if (validation.error) {\r\n const errors = validation.error.details.map(detail => detail.message)\r\n return res.status(422).send(errors)\r\n }\r\n \r\n \u002F\u002F restante do código \r\n});\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Ch3 id=\"1192\" class=\"qd os ho bf ot qe qf qg fg qh qi qj fj qk ql qm qn qo qp qq qr qs qt qu qv qw bk\"\u003ERepositório\u003C\u002Fh3\u003E\n\u003Cp id=\"b72d\" class=\"pw-post-body-paragraph my mz ho na b nb pa nd ne nf pb nh ni fk pc nk nl fn pd nn no fq pe nq nr ns gp bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ag pz\" href=\"https:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fvalidacao-joi\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fvalidacao-joi\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n","excerpt":"\u003Cp\u003EPara garantir o funcionamento correto das nossas APIs e evitar problemas é super importante sempre validar a entrada dos nossos usuários. No entanto…\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos\u002Fvalidacoes-mais-felizes-na-sua-api-com-a-biblioteca-joi","date":"7 jul, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F07\u002F26183954\u002FAPIs.jpg","externalMention":null,"author":{"id":144418,"thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1265600,"certifications":null,"conquests":null,"office":null,"articles":[{"id":164619,"title":"Como funcionam os operadores de atribuição lógica do ES2021 (JS)","content":"\u003Cdiv class=\"hd hw hx hy hz\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Cp id=\"2a19\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EDesde o lançamento da versão ECMAScript 6, em 2015, o TC19 têm trabalhado para trazer funcionalidades e melhorias para o JavaScript anualmente, afinal, foram muitos e muitos anos de espera até que o ES6 aparecesse.\u003C\u002Fp\u003E\n\u003Cp id=\"1a03\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EÉ claro que as funcionalidades que são aprovadas são em pouca quantidade, afinal, o processo para que uma funcionalidade seja aprovada é longo e exige muita discussão e testes antes de ser oficializada.\u003C\u002Fp\u003E\n\u003Cp id=\"ebda\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EComo já era de se esperar, a versão da ECMAScript está entre nós e traz algumas melhorias bem legais. Entre elas, estão:\u003C\u002Fp\u003E\n\u003Cul class=\"\"\u003E\n\u003Cli id=\"088c\" class=\"oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003EOperadores de atribuição lógica (\u003Cem class=\"pa\"\u003ELogical assignment operators\u003C\u002Fem\u003E);\u003C\u002Fli\u003E\n\u003Cli id=\"6549\" class=\"oc od ic oe b of pb oh oi oj pc ol om gd pd oo op gg pe or os gj pf ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003E\u003Cem class=\"pa\"\u003EString.replaceAll();\u003C\u002Fem\u003E\u003C\u002Fli\u003E\n\u003Cli id=\"daf9\" class=\"oc od ic oe b of pb oh oi oj pc ol om gd pd oo op gg pe or os gj pf ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003E\u003Cem class=\"pa\"\u003EPromise.any();\u003C\u002Fem\u003E\u003C\u002Fli\u003E\n\u003Cli id=\"695b\" class=\"oc od ic oe b of pb oh oi oj pc ol om gd pd oo op gg pe or os gj pf ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003EEntre outros.\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Cp id=\"ee4a\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003ENeste artigo quero falar sobre os operadores de atribuição lógica. Em outros artigos podemos tratar sobre os demais. Combinado?\u003C\u002Fp\u003E\n\u003Cp id=\"6900\" class=\"pg ph ic bg pi fx pj fy fz ga pk gb gc gd pl ge gf gg pm gh gi gj pn gk gl po bl\"\u003ESe você ainda não está familiarizado com o ECMAScript 6 (e suas versões posteriores), recomendo dar uma olhada no meu livro \u003Ca class=\"ah pp\" href=\"https:\u002F\u002Fwww.casadocodigo.com.br\u002Fproducts\u002Flivro-ecmascript6\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EECMAScript 6 — Entre de Cabeça no Futuro do JavaScript\u003C\u002Fa\u003E e meus cursos de \u003Ca class=\"ah pp\" href=\"https:\u002F\u002Fwww.codeprestige.com.br\u002Fcursos\u002Fes6\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EES6\u003C\u002Fa\u003E, \u003Ca class=\"ah pp\" href=\"https:\u002F\u002Fwww.codeprestige.com.br\u002Fcursos\u002Fes7-8\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EES7 e ES8\u003C\u002Fa\u003E! Tenho certeza que te ajudarão! 🙂\u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"hd hw hx hy hz\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"hd hw hx hy hz\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Ch2 id=\"227f\" class=\"pg ph ic bg pi fx pj fy fz ga pk gb gc gd pl ge gf gg pm gh gi gj pn gk gl po bl\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EOperadores de atribuição lógica\u003C\u002Fspan\u003E\u003C\u002Fh2\u003E\n\u003Cp id=\"ee81\" class=\"pw-post-body-paragraph oc od ic oe b of qr oh oi oj qs ol om gd qt oo op gg qu or os gj qv ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EEstes novos operadores são muito parecidos com os operadores lógicos que já estamos acostumados, no entanto, trazem algumas novidades muito úteis, principalmente para atribuirmos valores padrões para variáveis.\u003C\u002Fp\u003E\n\u003Cp id=\"3f0c\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003ESão três operadores: OR, AND e Null.\u003C\u002Fp\u003E\n\u003Ch3 id=\"b2b6\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003E\u003Cstrong class=\"oe id\"\u003EOperador de atribuição lógica OR\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\n\u003Cp id=\"4d73\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EEste operador é representado pelo símbolo:\u003C\u002Fp\u003E\n\u003Cpre class=\"qw qx qy qz ra rj rk rl rm ak rn bl\"\u003E\u003Ccode\u003E\u003Cspan id=\"8d44\" class=\"pg ph ic rk b go ro rp m rq rr\" data-selectable-paragraph=\"\"\u003Ex ||= y\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"8e7a\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EEste operador funciona da mesma maneira que a operação \u003Ccode class=\"de rs rt ru rk b\"\u003Ex || (x = y)\u003C\u002Fcode\u003E . Ou seja, \u003Cstrong class=\"oe id\"\u003Ea variável y somente terá o seu valor atribuído a x se ele possuir um valor considerado falso (\u003C\u002Fstrong\u003E\u003Ca class=\"ah pp\" href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FFalsy\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"oe id\"\u003E\u003Cem class=\"pa\"\u003Efalsy\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E\u003Cstrong class=\"oe id\"\u003E) no contexto booleano\u003C\u002Fstrong\u003E. Caso contrário, x permanece com o seu valor original.\u003C\u002Fp\u003E\n\u003Cp id=\"a970\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EParece confuso? Tenho certeza que o exemplo abaixo te ajudará a mais sentido para este caso. Veja só:\u003C\u002Fp\u003E\n\u003Cpre class=\"qw qx qy qz ra rj rk rl rm ak rn bl\"\u003E\u003Ccode\u003E\u003Cspan id=\"3846\" class=\"pg ph ic rk b go ro rp m rq rr\" data-selectable-paragraph=\"\"\u003Econst chave = () => {\r\n \u002F\u002F faz alguma lógica que retorna uma chave\r\n return \"chave\";\r\n}\u003C\u002Fspan\u003E\u003Cspan id=\"b3e0\" class=\"pg ph ic rk b go rv rp m rq rr\" data-selectable-paragraph=\"\"\u003E\u002F\u002F Exemplo 1\r\nconst usuario = {nome: \"Diego\", idade: 29, chave:\"\"};\r\nusuario.chave ||= chave(); \r\nconsole.log(usuario.chave); \u002F\u002F chave\u003C\u002Fspan\u003E\u003Cspan id=\"58c1\" class=\"pg ph ic rk b go rv rp m rq rr\" data-selectable-paragraph=\"\"\u003E\u002F\u002F Exemplo 2\r\nusuario.chave = \"outra chave\";\r\nusuario.chave ||= chave();\r\nconsole.log(usuario.chave); \u002F\u002F outra chave\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"5537\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003ENote que no \u003Cem class=\"pa\"\u003Eexemplo 1,\u003C\u002Fem\u003E como no objeto \u003Ccode class=\"de rs rt ru rk b\"\u003Eusuário\u003C\u002Fcode\u003E o valor do atributo \u003Ccode class=\"de rs rt ru rk b\"\u003Echave\u003C\u002Fcode\u003Eé vazio (representado por aspas vazias), o valor resultado é a string retornada na função. No \u003Cem class=\"pa\"\u003Eexemplo 2\u003C\u002Fem\u003E isso não acontece, pois o valor já não é mais falso no contexto booleano.\u003C\u002Fp\u003E\n\u003Ch3 id=\"53f6\" class=\"pw-post-body-paragraph oc od ic oe b of oh oi oj ol om gd oo op gg or os gj ou ov xv ow hd bl\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003E\u003Cstrong class=\"oe id\"\u003EOperador de atribuição lógica AND\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\n\u003Cp id=\"abf3\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EEste operador é representado pelo símbolo:\u003C\u002Fp\u003E\n\u003Cpre class=\"qw qx qy qz ra rj rk rl rm ak rn bl\"\u003E\u003Ccode\u003E\u003Cspan id=\"d1bd\" class=\"pg ph ic rk b go ro rp m rq rr\" data-selectable-paragraph=\"\"\u003Ex &&= y\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"f52a\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EEste operador funciona totalmente contrário ao operador de atribuição lógica OR, ou seja,\u003Cstrong class=\"oe id\"\u003E o valor da variável y será atribuída a x, se este já possui um valor verdadeiro (\u003C\u002Fstrong\u003E\u003Ca class=\"ah pp\" href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FTruthy\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"oe id\"\u003E\u003Cem class=\"pa\"\u003Etruthy\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E\u003Cstrong class=\"oe id\"\u003E)\u003C\u002Fstrong\u003E. Caso contrário, ele permanece com o valor que ele já tinha.\u003C\u002Fp\u003E\n\u003Cp id=\"dbe5\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EVeja como isso acontece com base no exemplo anterior:\u003C\u002Fp\u003E\n\u003Cpre class=\"qw qx qy qz ra rj rk rl rm ak rn bl\"\u003E\u003Ccode\u003E\u003Cspan id=\"929f\" class=\"pg ph ic rk b go ro rp m rq rr\" data-selectable-paragraph=\"\"\u003Econst chave = () => {\r\n \u002F\u002F faz alguma lógica que retorna uma chave\r\n return \"chave\";\r\n}\u003C\u002Fspan\u003E\u003Cspan id=\"f839\" class=\"pg ph ic rk b go rv rp m rq rr\" data-selectable-paragraph=\"\"\u003E\u002F\u002F Exemplo 1\r\nconst usuario = {nome: \"Diego\", idade: 29, chave:\"\"};\r\nusuario.chave &&= chave(); \r\nconsole.log(usuario.chave); \u002F\u002F \u003C\u002Fspan\u003E\u003Cspan id=\"0c5a\" class=\"pg ph ic rk b go rv rp m rq rr\" data-selectable-paragraph=\"\"\u003E\u002F\u002F Exemplo 2\r\nusuario.chave = \"outra chave\";\r\nusuario.chave &&= chave();\r\nconsole.log(usuario.chave); \u002F\u002F chave\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"1f5b\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003ERepare que os exemplos 1 e 2 são bem claros. No primeiro, como o valor do atributo chave é vazio, o operador não atribui nada. No segundo caso, ele atribui, pois o atributo chave agora possui um valor diferente de falso (no contexto booleano).\u003C\u002Fp\u003E\n\u003Ch3 id=\"084a\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003E\u003Cstrong class=\"oe id\"\u003EOperador de atribuição lógica Null\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\n\u003Cpre class=\"qw qx qy qz ra rj rk rl rm ak rn bl\"\u003E\u003Ccode\u003E\u003Cspan id=\"3924\" class=\"pg ph ic rk b go ro rp m rq rr\" data-selectable-paragraph=\"\"\u003Ex ??= y\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"2dc1\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EEste talvez seja o operador mais fácil de se entender. O valor de y será atribuído a x se, e somente se, este tem o valor \u003Ccode class=\"de rs rt ru rk b\"\u003Enull\u003C\u002Fcode\u003E ou \u003Ccode class=\"de rs rt ru rk b\"\u003Eundefined\u003C\u002Fcode\u003E. E se tratando do JavaScript, nada melhor do que uma maneira fácil de lidar com estes valores, não é?\u003C\u002Fp\u003E\n\u003Cp id=\"fd72\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EVeja o exemplo:\u003C\u002Fp\u003E\n\u003Cpre class=\"qw qx qy qz ra rj rk rl rm ak rn bl\"\u003E\u003Ccode\u003E\u003Cspan id=\"0939\" class=\"pg ph ic rk b go ro rp m rq rr\" data-selectable-paragraph=\"\"\u003Econst chave = () => {\r\n \u002F\u002F faz alguma lógica que retorna uma chave\r\n return \"chave\";\r\n}\u003C\u002Fspan\u003E\u003Cspan id=\"c669\" class=\"pg ph ic rk b go rv rp m rq rr\" data-selectable-paragraph=\"\"\u003E\u002F\u002F Exemplo 1\r\nconst usuario = {nome: \"Diego\", idade: 29, chave: null};\r\nusuario.chave ??= chave(); \r\nconsole.log(usuario.chave); \u002F\u002F chave\u003C\u002Fspan\u003E\u003Cspan id=\"9c4f\" class=\"pg ph ic rk b go rv rp m rq rr\" data-selectable-paragraph=\"\"\u003E\u002F\u002F Exemplo 2\r\nusuario.chave = \"outra chave\";\r\nusuario.chave ??= chave();\r\nconsole.log(usuario.chave); \u002F\u002F outra chave\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"58fe\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003ENo exemplo 1, atribuímos \u003Ccode class=\"de rs rt ru rk b\"\u003Enull\u003C\u002Fcode\u003E como valor do atributo chave do objeto usuário. Quando o operador é chamado, ele nota este valor e então atribui o valor que determinado como retorno na função \u003Ccode class=\"de rs rt ru rk b\"\u003Echave\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\n\u003Cp id=\"dc11\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003ENo exemplo 2 isso não acontece pois o valor já não é mais \u003Ccode class=\"de rs rt ru rk b\"\u003Enull\u003C\u002Fcode\u003E ou \u003Ccode class=\"de rs rt ru rk b\"\u003Eundefined\u003C\u002Fcode\u003E .\u003C\u002Fp\u003E\n\u003Ch3 id=\"51ae\" class=\"pg ph ic bg pi fx pj fy fz ga pk gb gc gd pl ge gf gg pm gh gi gj pn gk gl po bl\" data-selectable-paragraph=\"\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EConclusão\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\n\u003Cp id=\"f50b\" class=\"pw-post-body-paragraph oc od ic oe b of qr oh oi oj qs ol om gd qt oo op gg qu or os gj qv ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EO JavaScript não é a linguagem mais querida do mundo atualmente a toa. As pequenas melhorias que são trazidas anualmente faz com que a linguagem nunca pare de evoluir, no entanto, isso também exige que nós, programadores e programadoras, continuemos nos atualizando para saber quais são e como usar esses novos recursos.\u003C\u002Fp\u003E\n\u003Cp id=\"44a2\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EVocê pode fazer os testes no \u003Ca class=\"ah pp\" href=\"https:\u002F\u002Fbabeljs.io\u002Frepl\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"oe id\"\u003E\u003Cem class=\"pa\"\u003Erepl do Babel\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Cdiv class=\"hd hw hx hy hz\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Ch2 id=\"6623\" class=\"px ph ic bg pi py pz qa fz qb qc qd gc qe qf qg qh qi qj qk ql qm qn qo qp qq bl\" data-selectable-paragraph=\"\"\u003EVersão em Vídeo\u003C\u002Fh2\u003E\n\u003Cp id=\"5caf\" class=\"pw-post-body-paragraph oc od ic oe b of qr oh oi oj qs ol om gd qt oo op gg qu or os gj qv ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EAlém das instruções que darei abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!\u003C\u002Fp\u003E\n\u003Cfigure class=\"qw qx qy qz ra ne\"\u003E\n\u003Cdiv class=\"rb eu m em\"\u003E\n\u003Cdiv class=\"rc rd m\"\u003E\u003Ciframe class=\"eq o hs eg bi\" title=\"Como funcionam os operadores de atribuição lógica do ES2021 (JS)\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FvqJLRvk6_Xc%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DvqJLRvk6_Xc&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FvqJLRvk6_Xc%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"re rf rg nn no rh ri bg b bh ab ee\"\u003ECurta e se inscreva!\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"hd hw hx hy hz\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Ch3 id=\"227f\" class=\"pg ph ic bg pi fx pj fy fz ga pk gb gc gd pl ge gf gg pm gh gi gj pn gk gl po bl\" data-selectable-paragraph=\"\"\u003E\u003C\u002Fh3\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n","excerpt":"\u003Cp\u003ENeste artigo quero falar sobre os operadores de atribuição lógica. Em outros artigos podemos tratar sobre os demais. Combinado?\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-funcionam-os-operadores-de-atribuicao-logica-do-es2021-js","date":"13 nov, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F11\u002F13123849\u002Fjavascript-2.png","externalMention":null,"author":{"id":144418,"thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":120,"views_count":1428000,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"ES2021","slug":"es2021","id":9328,"link":"https:\u002F\u002Fimasters.com.br\u002Fes2021"},{"title":"ES2021 (JS)","slug":"es2021-js","id":9327,"link":"https:\u002F\u002Fimasters.com.br\u002Fes2021-js"},{"title":"Java Script","slug":"java-script","id":6186,"link":"https:\u002F\u002Fimasters.com.br\u002Fjava-script"},{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"js","slug":"js","id":3311,"link":"https:\u002F\u002Fimasters.com.br\u002Fjs"},{"title":"Operador de atribuição lógica","slug":"operador-de-atribuicao-logica","id":9325,"link":"https:\u002F\u002Fimasters.com.br\u002Foperador-de-atribuicao-logica"},{"title":"Operadores de atribuição lógica","slug":"operadores-de-atribuicao-logica","id":9326,"link":"https:\u002F\u002Fimasters.com.br\u002Foperadores-de-atribuicao-logica"}],"seo":{"open_graph":{"title":"Como funcionam os operadores de atribuição lógica do ES2021 (JS)","description":"Neste artigo quero falar sobre os operadores de atribuição lógica. Em outros artigos podemos tratar sobre os demais. Combinado?","type":"article","locale":"pt_BR","site_name":"iMasters - We are Developers","image":{"src":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F11\u002F13123849\u002Fjavascript-2.png","width":800,"height":533},"modified_time":"2025-11-13T12:39:32-03:00","published_time":"2025-11-13T12:39:32-03:00"},"twitter":{"title":"Como funcionam os operadores de atribuição lógica do ES2021 (JS)","description":"Neste artigo quero falar sobre os operadores de atribuição lógica. Em outros artigos podemos tratar sobre os demais. Combinado?","type":"summary_large_image","image":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F11\u002F13123849\u002Fjavascript-2.png"}},"articleSocial":{"facebook":"https:\u002F\u002Fwww.facebook.com\u002Fsharer?u=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-funcionam-os-operadores-de-atribuicao-logica-do-es2021-js","twitter":"https:\u002F\u002Ftwitter.com\u002Fshare?url=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-funcionam-os-operadores-de-atribuicao-logica-do-es2021-js","linkedin":"https:\u002F\u002Fwww.linkedin.com\u002FshareArticle?url=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-funcionam-os-operadores-de-atribuicao-logica-do-es2021-js"},"type":"post"},{"id":164350,"title":"Como estilizar as mensagens do terminal no Node","content":"\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Cp id=\"3772\" class=\"pw-post-body-paragraph oo op ic oq b ja qj os ot jd qk ov ow gd ql oy oz gg qm pb pc gj qn pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EÉ comum usarmos o Console como ferramenta nas nossas aplicações com Node, seja para validar algum dado, expor alguma mensagem\u002Ferro importante ou então ajudar no debug de dados. Entretanto, da maneira como isso é feito nativamente tem pouco apelo visual, afinal de contas, todas as mensagens tem a mesma cara.\u003C\u002Fp\u003E\n\u003Cp id=\"c7e5\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003ECom o chalk — biblioteca de código aberto disponível no GitHub com mais de 13k estrelas no GitHub e atualmente na versão 3.0.0 — conseguimos aplicar vários tipos de estilos as mensagens do terminal.\u003C\u002Fp\u003E\n\u003Cp id=\"6a63\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EPara testá-la precisamos inicializar um projeto com o npm. Para garantir que o resultado seja exatamente igual ao que mostrarei aqui, certifique-se de instalar como dependência a versão 3.0.0.\u003C\u002Fp\u003E\n\u003Cpre class=\"oc od oe of og rd re rf rg ak rh bl\"\u003E\u003Cspan id=\"ba90\" class=\"qw pq ic re b go ri rj m rk rl\" data-selectable-paragraph=\"\"\u003Enpm i chalk@3.0.0\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"a22b\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EVamos criar um arquivo \u003Ccode class=\"de rm rn ro re b\"\u003Eapp.js\u003C\u002Fcode\u003Ee criar nossa primeira mensagem estilizada usando o método \u003Ccode class=\"de rm rn ro re b\"\u003Egreen()\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\n\u003Cpre class=\"oc od oe of og rd re rf rg ak rh bl\"\u003E\u003Cspan id=\"5236\" class=\"qw pq ic re b go ri rj m rk rl\" data-selectable-paragraph=\"\"\u003E\u003Cstrong class=\"re id\"\u003Econst\u003C\u002Fstrong\u003E chalk \u003Cstrong class=\"re id\"\u003E=\u003C\u002Fstrong\u003E \u003Cem class=\"rp\"\u003Erequire\u003C\u002Fem\u003E('chalk');\r\n\u003Cstrong class=\"re id\"\u003Econst\u003C\u002Fstrong\u003E msg = chalk.\u003Cem class=\"rp\"\u003Egreen\u003C\u002Fem\u003E('Hello world!');\r\nconsole.\u003Cem class=\"rp\"\u003Elog\u003C\u002Fem\u003E(msg);\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"6091\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EO resultado fica muito legal:\u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"nq\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"nr ns nt nu nv nw cm nx cn ny cp bi\"\u003E\n\u003Cfigure class=\"oc od oe of og nq oh oi paragraph-image\"\u003E\n\u003Cdiv class=\"oj ok em ol bi om\" tabindex=\"0\" role=\"button\"\u003E\n\u003Cp\u003E\u003Cspan class=\"eq er es ao et eu ev ew ex speechify-ignore\"\u003EPress enter or click to view image in full size\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\n\u003Cdiv class=\"nz oa rq\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*NerqQXljbk4jecb2t3weeg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*NerqQXljbk4jecb2t3weeg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*NerqQXljbk4jecb2t3weeg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*NerqQXljbk4jecb2t3weeg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*NerqQXljbk4jecb2t3weeg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*NerqQXljbk4jecb2t3weeg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002Fformat:webp\u002F1*NerqQXljbk4jecb2t3weeg.png 2000w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*NerqQXljbk4jecb2t3weeg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*NerqQXljbk4jecb2t3weeg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*NerqQXljbk4jecb2t3weeg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*NerqQXljbk4jecb2t3weeg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*NerqQXljbk4jecb2t3weeg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*NerqQXljbk4jecb2t3weeg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002F1*NerqQXljbk4jecb2t3weeg.png 2000w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm on c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1250\u002F1*NerqQXljbk4jecb2t3weeg.png\" alt=\"\" width=\"1000\" height=\"605\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"qr qs qt nz oa qu qv bg b bh ab ee\" data-selectable-paragraph=\"\"\u003EEstilizando mensagens usando o chalk\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Cp id=\"15d9\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EBacana, né? Vamos explorar mais algumas funcionalidades do chalk.\u003C\u002Fp\u003E\n\u003Ch3 id=\"f2b6\" class=\"qw pq ic bg pr fx qx fy fz ga qy gb gc gd qz ge gf gg ra gh gi gj rb gk gl rc bl\" data-selectable-paragraph=\"\"\u003EEstilizando de forma encadeada\u003C\u002Fh3\u003E\n\u003Cp id=\"d3e5\" class=\"pw-post-body-paragraph oo op ic oq b ja qj os ot jd qk ov ow gd ql oy oz gg qm pb pc gj qn pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EComo a página oficial da biblioteca diz, o chalk possui uma API flexível que nos permite encadear e aninhar os estilos. Isso significa que podemos, por exemplo, aplicar negrito e cor em uma mensagem em uma tacada só:\u003C\u002Fp\u003E\n\u003Cpre class=\"oc od oe of og rd re rf rg ak rh bl\"\u003E\u003Cspan id=\"37a6\" class=\"qw pq ic re b go ri rj m rk rl\" data-selectable-paragraph=\"\"\u003Econst msg2 = chalk.\u003Cem class=\"rp\"\u003Ebold\u003C\u002Fem\u003E.\u003Cem class=\"rp\"\u003Ered\u003C\u002Fem\u003E(\"Hello World!\"); \r\nconsole.log(msg2);\u003C\u002Fspan\u003E\u003Cspan id=\"c44a\" class=\"qw pq ic re b go rr rj m rk rl\" data-selectable-paragraph=\"\"\u003E\u003Cem class=\"rp\"\u003E\u002F\u002F ou chalk.red.bold , a ordem não importa!\u003C\u002Fem\u003E\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"414b\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EA ordem das chamadas não importa, o resultado é o mesmo:\u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"nq\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"nr ns nt nu nv nw cm nx cn ny cp bi\"\u003E\n\u003Cfigure class=\"oc od oe of og nq oh oi paragraph-image\"\u003E\n\u003Cdiv class=\"oj ok em ol bi om\" tabindex=\"0\" role=\"button\"\u003E\n\u003Cp\u003E\u003Cspan class=\"eq er es ao et eu ev ew ex speechify-ignore\"\u003EPress enter or click to view image in full size\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\n\u003Cdiv class=\"nz oa rq\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*kmmTuMAtqRc3_jcnmvttug.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*kmmTuMAtqRc3_jcnmvttug.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*kmmTuMAtqRc3_jcnmvttug.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*kmmTuMAtqRc3_jcnmvttug.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*kmmTuMAtqRc3_jcnmvttug.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*kmmTuMAtqRc3_jcnmvttug.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002Fformat:webp\u002F1*kmmTuMAtqRc3_jcnmvttug.png 2000w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*kmmTuMAtqRc3_jcnmvttug.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*kmmTuMAtqRc3_jcnmvttug.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*kmmTuMAtqRc3_jcnmvttug.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*kmmTuMAtqRc3_jcnmvttug.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*kmmTuMAtqRc3_jcnmvttug.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*kmmTuMAtqRc3_jcnmvttug.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002F1*kmmTuMAtqRc3_jcnmvttug.png 2000w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm on c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1250\u002F1*kmmTuMAtqRc3_jcnmvttug.png\" alt=\"\" width=\"1000\" height=\"608\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"qr qs qt nz oa qu qv bg b bh ab ee\" data-selectable-paragraph=\"\"\u003EEstilizando mensagens usando o chalk e sua API flexível\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Cp id=\"3781\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EAlém disso, também podemos aninhar estilos. Como por exemplo:\u003C\u002Fp\u003E\n\u003Cpre class=\"oc od oe of og rd re rf rg ak rh bl\"\u003E\u003Cspan id=\"083b\" class=\"qw pq ic re b go ri rj m rk rl\" data-selectable-paragraph=\"\"\u003E\u003Cstrong class=\"re id\"\u003Econst\u003C\u002Fstrong\u003E msg3 = chalk.\u003Cem class=\"rp\"\u003Ebold\u003C\u002Fem\u003E(chalk.\u003Cem class=\"rp\"\u003Ered\u003C\u002Fem\u003E(\"Hello \") + chalk.\u003Cem class=\"rp\"\u003Egreen\u003C\u002Fem\u003E(\"World\"));\r\nconsole.log(msg3);\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"fb1c\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EAs strings “Hello” e “World” possuem características distintas, mas ambas herdarão o \u003Cstrong class=\"oq id\"\u003Enegrito\u003C\u002Fstrong\u003E. Veja só:\u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"nq\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"nr ns nt nu nv nw cm nx cn ny cp bi\"\u003E\n\u003Cfigure class=\"oc od oe of og nq oh oi paragraph-image\"\u003E\n\u003Cdiv class=\"oj ok em ol bi om\" tabindex=\"0\" role=\"button\"\u003E\n\u003Cp\u003E\u003Cspan class=\"eq er es ao et eu ev ew ex speechify-ignore\"\u003EPress enter or click to view image in full size\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\n\u003Cdiv class=\"nz oa rq\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*tuU8CRv3Vd10INdi9muqbg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*tuU8CRv3Vd10INdi9muqbg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*tuU8CRv3Vd10INdi9muqbg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*tuU8CRv3Vd10INdi9muqbg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*tuU8CRv3Vd10INdi9muqbg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*tuU8CRv3Vd10INdi9muqbg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002Fformat:webp\u002F1*tuU8CRv3Vd10INdi9muqbg.png 2000w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*tuU8CRv3Vd10INdi9muqbg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*tuU8CRv3Vd10INdi9muqbg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*tuU8CRv3Vd10INdi9muqbg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*tuU8CRv3Vd10INdi9muqbg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*tuU8CRv3Vd10INdi9muqbg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*tuU8CRv3Vd10INdi9muqbg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002F1*tuU8CRv3Vd10INdi9muqbg.png 2000w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm on c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1250\u002F1*tuU8CRv3Vd10INdi9muqbg.png\" alt=\"\" width=\"1000\" height=\"608\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"qr qs qt nz oa qu qv bg b bh ab ee\" data-selectable-paragraph=\"\"\u003EAninhando estilos nas mensagens usando o chalk\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Cp id=\"36ef\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EPara finalizar, vamos dar uma olhada em como é fácil criar suas próprias regras de estilo usando a API do chalk.\u003C\u002Fp\u003E\n\u003Ch3 id=\"dcc9\" class=\"qw pq ic bg pr fx qx fy fz ga qy gb gc gd qz ge gf gg ra gh gi gj rb gk gl rc bl\" data-selectable-paragraph=\"\"\u003EEstilizando com o seu estilo\u003C\u002Fh3\u003E\n\u003Cp id=\"af3b\" class=\"pw-post-body-paragraph oo op ic oq b ja qj os ot jd qk ov ow gd ql oy oz gg qm pb pc gj qn pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EPodemos criar nossas próprias regras usando a API do chalk de forma muito prática. Primeiro vou expor um exemplo e então exploramos o que cada linha está fazendo.\u003C\u002Fp\u003E\n\u003Cpre class=\"oc od oe of og rd re rf rg ak rh bl\"\u003E\u003Cspan id=\"6daa\" class=\"qw pq ic re b go ri rj m rk rl\" data-selectable-paragraph=\"\"\u003E\u003Cstrong class=\"re id\"\u003Econst\u003C\u002Fstrong\u003E error \u003Cstrong class=\"re id\"\u003E=\u003C\u002Fstrong\u003E chalk.bold.red;\r\n\u003Cstrong class=\"re id\"\u003Econst\u003C\u002Fstrong\u003E warning \u003Cstrong class=\"re id\"\u003E=\u003C\u002Fstrong\u003E chalk.bold.\u003Cem class=\"rp\"\u003Ekeyword\u003C\u002Fem\u003E('orange');\u003C\u002Fspan\u003E\u003Cspan id=\"5ef4\" class=\"qw pq ic re b go rr rj m rk rl\" data-selectable-paragraph=\"\"\u003Econsole.\u003Cem class=\"rp\"\u003Elog\u003C\u002Fem\u003E(\u003Cem class=\"rp\"\u003Eerror\u003C\u002Fem\u003E(\"Algo errado não está certo!\"));\r\nconsole.\u003Cem class=\"rp\"\u003Elog\u003C\u002Fem\u003E(\u003Cem class=\"rp\"\u003Ewarning\u003C\u002Fem\u003E(\"Não está errado mas também não está certo!\"));\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"c83f\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EAqui criamos dois estilos, \u003Ccode class=\"de rm rn ro re b\"\u003Eerror\u003C\u002Fcode\u003E e \u003Ccode class=\"de rm rn ro re b\"\u003Ewarning\u003C\u002Fcode\u003E . O primeiro, deixa a mensagem em negrito e vermelha. A segunda deixa a mensagem em negrito e com a cor laranja.\u003C\u002Fp\u003E\n\u003Cp id=\"5c54\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003ENa hora de exibir as mensagens, basta usarmos as palavras-chave criadas para os estilos! Veja só o resultado:\u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"nq\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"nr ns nt nu nv nw cm nx cn ny cp bi\"\u003E\n\u003Cfigure class=\"oc od oe of og nq oh oi paragraph-image\"\u003E\n\u003Cdiv class=\"oj ok em ol bi om\" tabindex=\"0\" role=\"button\"\u003E\n\u003Cp\u003E\u003Cspan class=\"eq er es ao et eu ev ew ex speechify-ignore\"\u003EPress enter or click to view image in full size\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\n\u003Cdiv class=\"nz oa rq\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002Fformat:webp\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 2000w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002F1*lE41-QDwYrwlMr0qKLCoZA.png 2000w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm on c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1250\u002F1*lE41-QDwYrwlMr0qKLCoZA.png\" alt=\"\" width=\"1000\" height=\"606\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"qr qs qt nz oa qu qv bg b bh ab ee\" data-selectable-paragraph=\"\"\u003ECriando estilos próprios usando o chalk\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Cp id=\"009d\" class=\"pw-post-body-paragraph oo op ic oq b ja or os ot jd ou ov ow gd ox oy oz gg pa pb pc gj pd pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EDivertido e prático, não?\u003C\u002Fp\u003E\n\u003Ch3 id=\"8829\" class=\"qw pq ic bg pr fx qx fy fz ga qy gb gc gd qz ge gf gg ra gh gi gj rb gk gl rc bl\" data-selectable-paragraph=\"\"\u003ECódigo-fonte\u003C\u002Fh3\u003E\n\u003Cp id=\"9175\" class=\"pw-post-body-paragraph oo op ic oq b ja qj os ot jd qk ov ow gd ql oy oz gg qm pb pc gj qn pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EPara quem quiser fazer os testes sem ter que ficar copiando do artigo, segue o código-fonte:\u003C\u002Fp\u003E\n\u003Cfigure class=\"oc od oe of og nq\"\u003E\n\u003Cdiv class=\"qo eu m em\"\u003E\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Econst chalk = require(\"chalk\");\r\n\r\nconst msg = chalk.green(\"Hello World!\");\r\nconst msg2 = chalk.red.bold(\"Hello World!\");\r\nconst msg3 = chalk.bold(chalk.red(\"Hello \") + chalk.green(\"World\"));\r\nconsole.log(msg);\r\nconsole.log(msg2);\r\nconsole.log(msg3);\r\n\r\nconst error = chalk.bold.red;\r\nconst warning = chalk.bold.keyword('orange');\r\nconsole.log(error(\"Algo errado não está certo!\"));\r\nconsole.log(warning(\"Não está errado mas também não está certo!\"));\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Ffigure\u003E\n\u003Ch3 id=\"31fd\" class=\"qw pq ic bg pr fx qx fy fz ga qy gb gc gd qz ge gf gg ra gh gi gj rb gk gl rc bl\" data-selectable-paragraph=\"\"\u003EConclusão\u003C\u002Fh3\u003E\n\u003Cp id=\"2f42\" class=\"pw-post-body-paragraph oo op ic oq b ja qj os ot jd qk ov ow gd ql oy oz gg qm pb pc gj qn pe pf pg hd bl\" data-selectable-paragraph=\"\"\u003EO chalk não é nenhuma biblioteca super revolucionária e pode parecer inútil para muitos, no entanto, se você for um usuário apaixonado pelo Console e o utiliza com frequência, não há dúvidas de que vale a pena dar uma olhada.\u003C\u002Fp\u003E\n\u003Ch3 id=\"a796\" class=\"qw pq ic bg pr fx qx fy fz ga qy gb gc gd qz ge gf gg ra gh gi gj rb gk gl rc bl\" data-selectable-paragraph=\"\"\u003EReferências\u003C\u002Fh3\u003E\n\u003Cul class=\"\"\u003E\n\u003Cli id=\"06c4\" class=\"oo op ic oq b ja qj os ot jd qk ov ow gd ql oy oz gg qm pb pc gj qn pe pf pg rt ru rv bl\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ah ph\" href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fchalk\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fchalk\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli id=\"bffd\" class=\"oo op ic oq b ja rw os ot jd rx ov ow gd ry oy oz gg rz pb pc gj sa pe pf pg rt ru rv bl\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ah ph\" href=\"https:\u002F\u002Fgithub.com\u002Fchalk\u002Fchalk\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002Fchalk\u002Fchalk\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n","excerpt":"\u003Cp\u003EÉ comum usarmos o Console como ferramenta nas nossas aplicações com Node, seja para validar algum dado, expor alguma mensagem\u002Ferro importante ou então\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-estilizar-as-mensagens-do-terminal-no-node","date":"3 nov, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F09\u002F28170203\u002Fjavascript-21.png","externalMention":null,"author":{"id":144418,"thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":120,"views_count":1428000,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"js","slug":"js","id":3311,"link":"https:\u002F\u002Fimasters.com.br\u002Fjs"},{"title":"node","slug":"node","id":236,"link":"https:\u002F\u002Fimasters.com.br\u002Fnode"}],"seo":{"open_graph":{"title":"Como estilizar as mensagens do terminal no Node","description":"É comum usarmos o Console como ferramenta nas nossas aplicações com Node, seja para validar algum dado, expor alguma mensagem\u002Ferro importante ou então","type":"article","locale":"pt_BR","site_name":"iMasters - We are Developers","image":{"src":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F09\u002F28170203\u002Fjavascript-21.png","width":800,"height":533},"modified_time":"2025-09-28T17:04:04-03:00","published_time":"2025-11-03T08:14:30-03:00"},"twitter":{"title":"Como estilizar as mensagens do terminal no Node","description":"É comum usarmos o Console como ferramenta nas nossas aplicações com Node, seja para validar algum dado, expor alguma mensagem\u002Ferro importante ou então","type":"summary_large_image","image":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F09\u002F28170203\u002Fjavascript-21.png"}},"articleSocial":{"facebook":"https:\u002F\u002Fwww.facebook.com\u002Fsharer?u=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-estilizar-as-mensagens-do-terminal-no-node","twitter":"https:\u002F\u002Ftwitter.com\u002Fshare?url=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-estilizar-as-mensagens-do-terminal-no-node","linkedin":"https:\u002F\u002Fwww.linkedin.com\u002FshareArticle?url=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-estilizar-as-mensagens-do-terminal-no-node"},"type":"post"},{"id":164344,"title":"Manipulando o tempo com o Day.js","content":"\u003Cp id=\"7da0\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EManipular datas e horários no JavaScript — e em linguagens de programação em geral — \u003Cstrong class=\"oe id\"\u003Epode ser uma tarefa árdua\u003C\u002Fstrong\u003E. Existem inúmeras variáveis que precisamos levar em consideração ao lidar com esse tipo de informação:\u003C\u002Fp\u003E\n\u003Cul class=\"\"\u003E\n\u003Cli id=\"4f95\" class=\"oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003Eformato;\u003C\u002Fli\u003E\n\u003Cli id=\"f0a5\" class=\"oc od ic oe b of pa oh oi oj pb ol om gd pc oo op gg pd or os gj pe ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003Elocal;\u003C\u002Fli\u003E\n\u003Cli id=\"e545\" class=\"oc od ic oe b of pa oh oi oj pb ol om gd pc oo op gg pd or os gj pe ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003Efuso horário;\u003C\u002Fli\u003E\n\u003Cli id=\"4fd7\" class=\"oc od ic oe b of pa oh oi oj pb ol om gd pc oo op gg pd or os gj pe ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003Edias da semana;\u003C\u002Fli\u003E\n\u003Cli id=\"0100\" class=\"oc od ic oe b of pa oh oi oj pb ol om gd pc oo op gg pd or os gj pe ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003Eanos bissextos;\u003C\u002Fli\u003E\n\u003Cli id=\"66c8\" class=\"oc od ic oe b of pa oh oi oj pb ol om gd pc oo op gg pd or os gj pe ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003Emeses com 30 ou 31 dias;\u003C\u002Fli\u003E\n\u003Cli id=\"4d64\" class=\"oc od ic oe b of pa oh oi oj pb ol om gd pc oo op gg pd or os gj pe ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003Eetc.\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Cp id=\"bb01\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EO que parece trivial pode se tornar uma tarefa que demanda muitas horas (e pode dar uma dor de cabeça enorme!).\u003C\u002Fp\u003E\n\u003Cp id=\"171e\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003ENo JavaScript já temos algumas APIs para lidar com datas, mas nenhuma delas muito intuitiva. Foi aí que apareceu o \u003Ca class=\"ah pf\" href=\"https:\u002F\u002Fmomentjs.com\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"oe id\"\u003EMoment.js\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E, uma pequena biblioteca de código aberto que nos permite \u003Cem class=\"pg\"\u003Eparsear\u003C\u002Fem\u003E, validar, manipular e exibir datas e horários pro usuário através do JavaScript. Sua proposta foi tão bem aceita que ela se tornou referência neste aspecto.\u003C\u002Fp\u003E\n\u003Cp id=\"6f75\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EPorém, como tudo que é bom, ele ganhou alguns concorrentes bem legais e neste artigo discutiremos especificamente sobre um deles: o \u003Ca class=\"ah pf\" href=\"https:\u002F\u002Fgithub.com\u002Fiamkun\u002Fdayjs\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"oe id\"\u003EDay.js\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Ch2 id=\"5f06\" class=\"ph pi ic bg pj pk pl pm fz pn po pp gc pq pr ps pt pu pv pw px py pz qa qb qc bl\" data-selectable-paragraph=\"\"\u003EConhecendo o Day.js\u003C\u002Fh2\u003E\n\u003Cp id=\"6cea\" class=\"pw-post-body-paragraph oc od ic oe b of qd oh oi oj qe ol om gd qf oo op gg qg or os gj qh ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EComo a própria documentação do projeto já diz:\u003C\u002Fp\u003E\n\u003Cblockquote class=\"qi\"\u003E\n\u003Cp id=\"434d\" class=\"qj qk ic bg ql qm qn qo qp qq qr ow ee\" data-selectable-paragraph=\"\"\u003E\u003Cem class=\"qs\"\u003EO Day.js é uma pequena biblioteca JavaScript (é realmente pequena, tem somente 2kb!) que nos permite parsear, manipular, validar e mostrar datas e horários em navegadores modernos.\u003C\u002Fem\u003E\u003C\u002Fp\u003E\n\u003C\u002Fblockquote\u003E\n\u003Cp id=\"6888\" class=\"pw-post-body-paragraph oc od ic oe b of qt oh oi oj qu ol om gd qv oo op gg qw or os gj qx ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EAlém disso, ele é altamente compatível com o a API do Moment.js, de modo que o próprio site também nos diz: “Se você já usou o Moment.js, então você já sabe como usar o Day.js”.\u003C\u002Fp\u003E\n\u003Cfigure class=\"qz ra rb rc rd ne nn no paragraph-image\"\u003E\n\u003Cdiv class=\"nn no qy\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F0*gFoaGFiX_YvYkdAl.jpg 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F0*gFoaGFiX_YvYkdAl.jpg 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F0*gFoaGFiX_YvYkdAl.jpg 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F0*gFoaGFiX_YvYkdAl.jpg 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F0*gFoaGFiX_YvYkdAl.jpg 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F0*gFoaGFiX_YvYkdAl.jpg 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1240\u002Fformat:webp\u002F0*gFoaGFiX_YvYkdAl.jpg 1240w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 620px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F0*gFoaGFiX_YvYkdAl.jpg 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F0*gFoaGFiX_YvYkdAl.jpg 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F0*gFoaGFiX_YvYkdAl.jpg 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F0*gFoaGFiX_YvYkdAl.jpg 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F0*gFoaGFiX_YvYkdAl.jpg 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F0*gFoaGFiX_YvYkdAl.jpg 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1240\u002F0*gFoaGFiX_YvYkdAl.jpg 1240w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 620px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm ob c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:775\u002F0*gFoaGFiX_YvYkdAl.jpg\" alt=\"\" width=\"620\" height=\"330\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Ffigure\u003E\n\u003Cp id=\"3efa\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EO Day.js é um projeto de código aberto e está publicado no GitHub sob licença MIT, e se você achava que o projeto era pequeno por ser uma alternativa ao Moment.js, saiba que está muito enganado: ele já possui mais de 16 mil estrelas no repositório.\u003C\u002Fp\u003E\n\u003Cp id=\"702e\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EFicou curioso? Vamos dar uma olhada em sua API.\u003C\u002Fp\u003E\n\u003Ch2 id=\"9afc\" class=\"ph pi ic bg pj pk pl pm fz pn po pp gc pq pr ps pt pu pv pw px py pz qa qb qc bl\" data-selectable-paragraph=\"\"\u003EBrincando com o tempo\u003C\u002Fh2\u003E\n\u003Cp id=\"b935\" class=\"pw-post-body-paragraph oc od ic oe b of qd oh oi oj qe ol om gd qf oo op gg qg or os gj qh ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EComo já citado anteriormente, a biblioteca é muito semelhante ao Moment.js e nos oferece algumas funcionalidades interessantes, como o fato de ela ter uma \u003Cem class=\"pg\"\u003EAPI Chainable\u003C\u002Fem\u003E (encadeáveis).\u003C\u002Fp\u003E\n\u003Cp id=\"85c9\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EIsso significa que conseguimos encadear os métodos (invocá-los um após o outro diretamente) para formatar as informações da maneira que precisamos dentro do contexto da nossa aplicação.\u003C\u002Fp\u003E\n\u003Cp id=\"328d\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EO primeiro passo para utilizar a biblioteca é instalar ela dentro do nosso projeto. Para isso, podemos utilizar o bom e velho npm. Entre no terminal e digite:\u003C\u002Fp\u003E\n\u003Cpre class=\"qz ra rb rc rd re rf rg rh ak ri bl\"\u003E\u003Cspan id=\"c493\" class=\"rj pi ic rf b go rk rl m rm rn\" data-selectable-paragraph=\"\"\u003Enpm install dayjs --save\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"1111\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EFeito isso, já conseguimos trabalhar com ela. O primeiro método que precisamos saber é o dayjs(). Uma vez invocado sem parâmetros, ele nos retorna a data no momento em que ele foi invocado.\u003C\u002Fp\u003E\n\u003Cfigure class=\"qz ra rb rc rd ne nn no paragraph-image\"\u003E\n\u003Cdiv class=\"nx ny em nz bi oa\" tabindex=\"0\" role=\"button\"\u003E\u003Cspan class=\"eq er es ao et eu ev ew ex speechify-ignore\"\u003EPress enter or click to view image in full size\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\n\u003Cdiv class=\"nn no ro\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F0*sXeAWKGVZpBwCkB4.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F0*sXeAWKGVZpBwCkB4.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F0*sXeAWKGVZpBwCkB4.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F0*sXeAWKGVZpBwCkB4.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F0*sXeAWKGVZpBwCkB4.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F0*sXeAWKGVZpBwCkB4.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F0*sXeAWKGVZpBwCkB4.png 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F0*sXeAWKGVZpBwCkB4.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F0*sXeAWKGVZpBwCkB4.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F0*sXeAWKGVZpBwCkB4.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F0*sXeAWKGVZpBwCkB4.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F0*sXeAWKGVZpBwCkB4.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F0*sXeAWKGVZpBwCkB4.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F0*sXeAWKGVZpBwCkB4.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm ob c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:875\u002F0*sXeAWKGVZpBwCkB4.png\" alt=\"\" width=\"700\" height=\"227\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Ffigure\u003E\n\u003Cp id=\"c486\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EA partir daqui, podemos começar a encadear métodos. Por exemplo, se quisermos o ano, mês e dia separadamente, podemos usar os métodos \u003Cem class=\"pg\"\u003Eyear()\u003C\u002Fem\u003E, \u003Cem class=\"pg\"\u003Emonth()\u003C\u002Fem\u003E e \u003Cem class=\"pg\"\u003Edate()\u003C\u002Fem\u003E, respectivamente.\u003C\u002Fp\u003E\n\u003Cpre class=\"qz ra rb rc rd re rf rg rh ak ri bl\"\u003E\u003Cspan id=\"8040\" class=\"rj pi ic rf b go rk rl m rm rn\" data-selectable-paragraph=\"\"\u003Econsole.log(dayjs());\r\nconsole.log(dayjs().year()); \u002F\u002F 2018\r\nconsole.log(dayjs().month()); \u002F\u002F 11\r\nconsole.log(dayjs().date()); \u002F\u002F 5\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"29da\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EO resultado é:\u003C\u002Fp\u003E\n\u003Cfigure class=\"qz ra rb rc rd ne nn no paragraph-image\"\u003E\n\u003Cdiv class=\"nn no rp\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F0*tF7cXDFwl7GSL6ea.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F0*tF7cXDFwl7GSL6ea.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F0*tF7cXDFwl7GSL6ea.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F0*tF7cXDFwl7GSL6ea.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F0*tF7cXDFwl7GSL6ea.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F0*tF7cXDFwl7GSL6ea.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1142\u002Fformat:webp\u002F0*tF7cXDFwl7GSL6ea.png 1142w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 571px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F0*tF7cXDFwl7GSL6ea.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F0*tF7cXDFwl7GSL6ea.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F0*tF7cXDFwl7GSL6ea.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F0*tF7cXDFwl7GSL6ea.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F0*tF7cXDFwl7GSL6ea.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F0*tF7cXDFwl7GSL6ea.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1142\u002F0*tF7cXDFwl7GSL6ea.png 1142w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 571px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm ob c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:714\u002F0*tF7cXDFwl7GSL6ea.png\" alt=\"\" width=\"571\" height=\"133\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Ffigure\u003E\n\u003Cp id=\"d210\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EAlém da visualização, a manipulação das datas também é bem tranquila através do método \u003Cem class=\"pg\"\u003Eset()\u003C\u002Fem\u003E. Basta termos o objeto de data do Day.js e invocar este método passando o critério que desejamos alterar (ano, dia, mês, etc). Podemos até mesmo encadear os três para gerar a data desejada.\u003C\u002Fp\u003E\n\u003Cpre class=\"qz ra rb rc rd re rf rg rh ak ri bl\"\u003E\u003Cspan id=\"5909\" class=\"rj pi ic rf b go rk rl m rm rn\" data-selectable-paragraph=\"\"\u003Econsole.log(dayjs().set('year',2015).set('month', 3).set('day', 25));\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"9d34\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EO resultado é o que segue:\u003C\u002Fp\u003E\n\u003Cfigure class=\"qz ra rb rc rd ne nn no paragraph-image\"\u003E\n\u003Cdiv class=\"nn no qy\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F0*soOjklJTDjY2bP3d.jpg 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F0*soOjklJTDjY2bP3d.jpg 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F0*soOjklJTDjY2bP3d.jpg 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F0*soOjklJTDjY2bP3d.jpg 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F0*soOjklJTDjY2bP3d.jpg 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F0*soOjklJTDjY2bP3d.jpg 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1240\u002Fformat:webp\u002F0*soOjklJTDjY2bP3d.jpg 1240w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 620px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F0*soOjklJTDjY2bP3d.jpg 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F0*soOjklJTDjY2bP3d.jpg 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F0*soOjklJTDjY2bP3d.jpg 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F0*soOjklJTDjY2bP3d.jpg 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F0*soOjklJTDjY2bP3d.jpg 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F0*soOjklJTDjY2bP3d.jpg 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1240\u002F0*soOjklJTDjY2bP3d.jpg 1240w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 620px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm ob c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:775\u002F0*soOjklJTDjY2bP3d.jpg\" alt=\"\" width=\"620\" height=\"140\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Ffigure\u003E\n\u003Cp id=\"b429\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EAproveitando que estamos mostrando o resultado da data, podemos dar uma olhada nos métodos e formatações de display disponíveis.\u003C\u002Fp\u003E\n\u003Cp id=\"3922\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EA formatação no fundo é bem simples: basta utilizarmos o método \u003Cem class=\"pg\"\u003Eformat() \u003C\u002Fem\u003Ecom os parâmetros que definem como ele será exposto na tela. Por exemplo:\u003C\u002Fp\u003E\n\u003Cpre class=\"qz ra rb rc rd re rf rg rh ak ri bl\"\u003E\u003Cspan id=\"0ce9\" class=\"rj pi ic rf b go rk rl m rm rn\" data-selectable-paragraph=\"\"\u003Econsole.log(dayjs().format()); \u002F\u002F ISO6801\r\nconsole.log(dayjs().format('{YYYY} MM-DDTHH:mm:ssZ[Z]'));\r\nconsole.log(dayjs().format('DD\u002FMM\u002FYYYY'));\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"25a7\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EO resultado será o seguinte:\u003C\u002Fp\u003E\n\u003Cfigure class=\"qz ra rb rc rd ne nn no paragraph-image\"\u003E\n\u003Cdiv class=\"nn no qy\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F0*Who1xG2_vG-yc3ml.jpg 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F0*Who1xG2_vG-yc3ml.jpg 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F0*Who1xG2_vG-yc3ml.jpg 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F0*Who1xG2_vG-yc3ml.jpg 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F0*Who1xG2_vG-yc3ml.jpg 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F0*Who1xG2_vG-yc3ml.jpg 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1240\u002Fformat:webp\u002F0*Who1xG2_vG-yc3ml.jpg 1240w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 620px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F0*Who1xG2_vG-yc3ml.jpg 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F0*Who1xG2_vG-yc3ml.jpg 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F0*Who1xG2_vG-yc3ml.jpg 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F0*Who1xG2_vG-yc3ml.jpg 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F0*Who1xG2_vG-yc3ml.jpg 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F0*Who1xG2_vG-yc3ml.jpg 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1240\u002F0*Who1xG2_vG-yc3ml.jpg 1240w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 620px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm ob c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:775\u002F0*Who1xG2_vG-yc3ml.jpg\" alt=\"\" width=\"620\" height=\"283\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Ffigure\u003E\n\u003Cp id=\"5ffd\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003ETodos os parâmetros possíveis para formatação estão \u003Ca class=\"ah pf\" href=\"https:\u002F\u002Fgithub.com\u002Fiamkun\u002Fdayjs\u002Fblob\u002Fmaster\u002Fdocs\u002Fen\u002FAPI-reference.md#list-of-all-available-formats\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Eneste link\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Ch2 id=\"6289\" class=\"ph pi ic bg pj pk pl pm fz pn po pp gc pq pr ps pt pu pv pw px py pz qa qb qc bl\" data-selectable-paragraph=\"\"\u003EConclusão\u003C\u002Fh2\u003E\n\u003Cp id=\"bbf1\" class=\"pw-post-body-paragraph oc od ic oe b of qd oh oi oj qe ol om gd qf oo op gg qg or os gj qh ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EBibliotecas, frameworks e afins são como ferramentas em uma caixa: quanto mais opções, melhor. Cabe ao desenvolvedor saber qual usar em cada uma das situações.\u003C\u002Fp\u003E\n\u003Cp id=\"190c\" class=\"pw-post-body-paragraph oc od ic oe b of og oh oi oj ok ol om gd on oo op gg oq or os gj ot ou ov ow hd bl\" data-selectable-paragraph=\"\"\u003EO Moment.js se consagrou como uma biblioteca para manipular datas e horários, mas é importante conhecer alternativas, e o Day.js é uma excelente opção.\u003C\u002Fp\u003E\n\u003Ch2 id=\"d995\" class=\"ph pi ic bg pj pk pl pm fz pn po pp gc pq pr ps pt pu pv pw px py pz qa qb qc bl\" data-selectable-paragraph=\"\"\u003EReferências\u003C\u002Fh2\u003E\n\u003Cul class=\"\"\u003E\n\u003Cli id=\"ce21\" class=\"oc od ic oe b of qd oh oi oj qe ol om gd qf oo op gg qg or os gj qh ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ah pf\" href=\"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento\u002Flidando-com-o-tempo-usando-o-day-js\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento\u002Flidando-com-o-tempo-usando-o-day-js\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli id=\"e2fd\" class=\"oc od ic oe b of pa oh oi oj pb ol om gd pc oo op gg pd or os gj pe ou ov ow ox oy oz bl\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ah pf\" href=\"https:\u002F\u002Fgithub.com\u002Fiamkun\u002Fdayjs\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002Fiamkun\u002Fdayjs\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n","excerpt":"\u003Cp\u003EManipular datas e horários no JavaScript — e em linguagens de programação em geral — pode ser uma tarefa árdua. Existem inúmeras variáveis que\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fmanipulando-o-tempo-com-o-day-js","date":"20 out, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F10\u002F28164738\u002Fjavascript-2.png","externalMention":null,"author":{"id":144418,"thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":120,"views_count":1428000,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"js","slug":"js","id":3311,"link":"https:\u002F\u002Fimasters.com.br\u002Fjs"}],"seo":{"open_graph":{"title":"Manipulando o tempo com o Day.js, de Diego Pinho","description":"Manipular datas e horários no JavaScript — e em linguagens de programação em geral — pode ser uma tarefa árdua. Existem inúmeras variáveis que","type":"article","locale":"pt_BR","site_name":"iMasters - We are Developers","image":{"src":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F10\u002F28164738\u002Fjavascript-2.png","width":800,"height":533},"modified_time":"2025-09-28T16:50:42-03:00","published_time":"2025-10-20T08:14:30-03:00"},"twitter":{"title":"Manipulando o tempo com o Day.js, de Diego Pinho","description":"Manipular datas e horários no JavaScript — e em linguagens de programação em geral — pode ser uma tarefa árdua. Existem inúmeras variáveis que","type":"summary_large_image","image":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F10\u002F28164738\u002Fjavascript-2.png"}},"articleSocial":{"facebook":"https:\u002F\u002Fwww.facebook.com\u002Fsharer?u=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fmanipulando-o-tempo-com-o-day-js","twitter":"https:\u002F\u002Ftwitter.com\u002Fshare?url=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fmanipulando-o-tempo-com-o-day-js","linkedin":"https:\u002F\u002Fwww.linkedin.com\u002FshareArticle?url=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fmanipulando-o-tempo-com-o-day-js"},"type":"post"},{"id":164340,"title":"Gerando arquivos PDF com JavaScript","content":"\u003Cp id=\"be1b\" class=\"pw-post-body-paragraph ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003ENão é novidade nenhuma que o JavaScript hoje é praticamente uma solução universal para qualquer problema tecnológico. Desde aplicações web, até IoT (Internet das Coisas) — conseguimos fazer de tudo com a linguagem. E para o problema de geração de arquivos em PDF, a situação é a mesma: \u003Cstrong class=\"oa id\"\u003Eo JavaScript também é a solução.\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Cp id=\"be62\" class=\"pw-post-body-paragraph ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003ESe procurarmos na internet como fazer isso, vamos nos deparar com uma quantidade considerável de opções. Existem boas, ruins e medianas, mas das que usamos até então, a que se apresentou a melhor foi o \u003Ca class=\"ah ot\" href=\"https:\u002F\u002Fgithub.com\u002FMrRio\u002FjsPDF\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EjsPDF\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Cp id=\"c1cb\" class=\"pw-post-body-paragraph ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003EVamos ver como ela funciona.\u003C\u002Fp\u003E\n\u003Ch3 id=\"7f8a\" class=\"ou ov ic bg ow fx ox fy fz ga oy gb gc gd oz ge gf gg pa gh gi gj pb gk gl pc bl\" data-selectable-paragraph=\"\"\u003EGerando PDFs loucamente\u003C\u002Fh3\u003E\n\u003Cp id=\"ddb1\" class=\"pw-post-body-paragraph ny nz ic oa b ob pd od oe of pe oh oi gd pf ok ol gg pg on oo gj ph oq or os hd bl\" data-selectable-paragraph=\"\"\u003EO \u003Ca class=\"ah ot\" href=\"https:\u002F\u002Fgithub.com\u002FMrRio\u002FjsPDF\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"oa id\"\u003EjsPDF\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E\u003Cstrong class=\"oa id\"\u003E \u003C\u002Fstrong\u003Eé um projeto open source disponível no GitHub por meio da licença MIT e que já tem mais de 15000 estrelas no repositório. O objetivo da biblioteca é bem simples: \u003Cstrong class=\"oa id\"\u003Egerar PDFs por meio do JavaScript no client-side\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cp id=\"19f3\" class=\"pw-post-body-paragraph ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003EO primeiro passo para utilizar ela é trazê-la para o seu projeto. O jeito mais fácil é por meio da tag script no HTML, apontando para a biblioteca hospedada no CloudFlare. Para isso, faça:\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003E\u003Ccode\u003E<script src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fjspdf\u002F1.4.1\u002Fjspdf.debug.js\" integrity=\"sha384-THVO\u002FsM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb\u002FPTA7LdUHs\" crossorigin=\"anonymous\"><\u002Fscript>\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003ECaso esteja utilizando o yarn ou npm, basta executar:\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003E\u003Ccode\u003Enpm install jspdf --save\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003Eyarn add jspdf\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003EFeito isso já podemos começar a trabalhar no nosso PDF. Primeiramente criamos uma nova instância do objeto jsPDF. Com o objeto em mãos, podemos usar o método \u003Cem class=\"pz\"\u003Etext()\u003C\u002Fem\u003E para inserir um texto. Por fim, usamos o método \u003Cem class=\"pz\"\u003Esave()\u003C\u002Fem\u003E para gravar e gerar o documento em PDF. Este código todo não passa de três linhas.\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003E\u003Ccode\u003Evar doc = new jsPDF()\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003Edoc.text('Hello world!', 10, 10)\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003Edoc.save('a4.pdf')\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003EMas isso é só o primeiro passo. Por definição, o pdf exportado é no tamanho A4, na orientação retrato e usa milímetros como unidade de medida. Mas tudo isso é configurável. Na função construtora \u003Cem class=\"pz\"\u003EjsPDF()\u003C\u002Fem\u003E podemos passar um objetos de configuração com todos estes parâmetros:\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003E\u003Ccode\u003Evar doc = new jsPDF({\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003Eorientation: 'landscape',\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003Eunit: 'cm',\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003Eformat: 'letter'\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003E})\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp id=\"caa9\" class=\"pw-post-body-paragraph ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003ENote que agora temos um pdf no formato paisagem usando centímetros como unidade de medida. Além disso, também configuramos para o tamanho ser no formato carta. Todas configurações disponíveis estão \u003Ca class=\"ah ot\" href=\"https:\u002F\u002Frawgit.com\u002FMrRio\u002FjsPDF\u002Fmaster\u002Fdocs\u002FjsPDF.html\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Enesta página\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Ch3 id=\"9f21\" class=\"ou ov ic bg ow fx ox fy fz ga oy gb gc gd oz ge gf gg pa gh gi gj pb gk gl pc bl\" data-selectable-paragraph=\"\"\u003ETexto é só o começo\u003C\u002Fh3\u003E\n\u003Cp id=\"c2de\" class=\"pw-post-body-paragraph ny nz ic oa b ob pd od oe of pe oh oi gd pf ok ol gg pg on oo gj ph oq or os hd bl\" data-selectable-paragraph=\"\"\u003EVimos que o método \u003Cem class=\"pz\"\u003Etext()\u003C\u002Fem\u003E adiciona texto ao pdf., \u003Cstrong class=\"oa id\"\u003Emas se a biblioteca se limitasse a isso, não seria tão interessante\u003C\u002Fstrong\u003E. O jsPDF nos oferece várias APIs para criar formas, imagens e figuras. Segue algumas delas abaixo:\u003C\u002Fp\u003E\n\u003Cul class=\"\"\u003E\n\u003Cli id=\"d65a\" class=\"ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os qa qb qc bl\" data-selectable-paragraph=\"\"\u003Ecircle\u003C\u002Fli\u003E\n\u003Cli id=\"09f1\" class=\"ny nz ic oa b ob qd od oe of qe oh oi gd qf ok ol gg qg on oo gj qh oq or os qa qb qc bl\" data-selectable-paragraph=\"\"\u003EaddImage\u003C\u002Fli\u003E\n\u003Cli id=\"4f81\" class=\"ny nz ic oa b ob qd od oe of qe oh oi gd qf ok ol gg qg on oo gj qh oq or os qa qb qc bl\" data-selectable-paragraph=\"\"\u003EaddFont\u003C\u002Fli\u003E\n\u003Cli id=\"5650\" class=\"ny nz ic oa b ob qd od oe of qe oh oi gd qf ok ol gg qg on oo gj qh oq or os qa qb qc bl\" data-selectable-paragraph=\"\"\u003Eellipse\u003C\u002Fli\u003E\n\u003Cli id=\"2761\" class=\"ny nz ic oa b ob qd od oe of qe oh oi gd qf ok ol gg qg on oo gj qh oq or os qa qb qc bl\" data-selectable-paragraph=\"\"\u003Eline\u003C\u002Fli\u003E\n\u003Cli id=\"566c\" class=\"ny nz ic oa b ob qd od oe of qe oh oi gd qf ok ol gg qg on oo gj qh oq or os qa qb qc bl\" data-selectable-paragraph=\"\"\u003Etriangle\u003C\u002Fli\u003E\n\u003Cli id=\"1dd0\" class=\"ny nz ic oa b ob qd od oe of qe oh oi gd qf ok ol gg qg on oo gj qh oq or os qa qb qc bl\" data-selectable-paragraph=\"\"\u003Erect\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Cp id=\"10ff\" class=\"pw-post-body-paragraph ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003ETodos os métodos disponíveis \u003Ca class=\"ah ot\" href=\"https:\u002F\u002Frawgit.com\u002FMrRio\u002FjsPDF\u002Fmaster\u002Fdocs\u002FjsPDF.html#ellipse\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Eestão na documentação\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Ch3 id=\"8837\" class=\"ou ov ic bg ow fx ox fy fz ga oy gb gc gd oz ge gf gg pa gh gi gj pb gk gl pc bl\" data-selectable-paragraph=\"\"\u003ETestando os PDFs\u003C\u002Fh3\u003E\n\u003Cp id=\"c8e4\" class=\"pw-post-body-paragraph ny nz ic oa b ob pd od oe of pe oh oi gd pf ok ol gg pg on oo gj ph oq or os hd bl\" data-selectable-paragraph=\"\"\u003EPara poder testar os PDFs e ver os seus resultados na prática, podemos usar \u003Ca class=\"ah ot\" href=\"https:\u002F\u002Frawgit.com\u002FMrRio\u002FjsPDF\u002Fmaster\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Eeste link\u003C\u002Fa\u003E. Do lado esquerdo adicionamos o código e do lado direito o pdf é gerado de acordo com as suas especificações, como no exemplo a seguir:\u003C\u002Fp\u003E\n\u003Cpre class=\"pi pj pk pl pm pq pr ps pt ak pu bl\"\u003E\u003Ccode\u003E\u003Cspan id=\"0009\" class=\"ou ov ic pr b go pv pw m px py\" data-selectable-paragraph=\"\"\u003Evar imgData = \"\"; \u002F\u002F base-64\r\nvar doc = new jsPDF();\u003C\u002Fspan\u003E\u003Cspan id=\"c1a9\" class=\"ou ov ic pr b go qi pw m px py\" data-selectable-paragraph=\"\"\u003Edoc.setFontSize(40);\r\ndoc.text(35, 25, \"Artigo para o iMasters\");\r\ndoc.addImage(imgData, 'JPEG', 15, 40, 180, 180);\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Cp id=\"85d7\" class=\"pw-post-body-paragraph ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003EO resultado é o seguinte:\u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"nf\"\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"ng nh ni nj nk nl cm nm cn nn cp bi\"\u003E\n\u003Cfigure class=\"pi pj pk pl pm nf nv nw paragraph-image\"\u003E\n\u003Cdiv class=\"qk ql em qm bi qn\" tabindex=\"0\" role=\"button\"\u003E\n\u003Cp\u003E\u003Cspan class=\"eq er es ao et eu ev ew ex speechify-ignore\"\u003EPress enter or click to view image in full size\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\n\u003Cdiv class=\"no np qj\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002Fformat:webp\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 2000w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002F1*0MXo6gmFep7LGxXFqiHmtw.png 2000w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bi fm nx c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1250\u002F1*0MXo6gmFep7LGxXFqiHmtw.png\" alt=\"\" width=\"1000\" height=\"673\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"qo qp qq no np qr qs bg b bh ab ee\" data-selectable-paragraph=\"\"\u003EPDF criado usando o jsPDF\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"ac ci\"\u003E\n\u003Cdiv class=\"cp bi hj hk hl hm\"\u003E\n\u003Cblockquote class=\"qt qu qv\"\u003E\n\u003Cp id=\"f6ff\" class=\"ny nz pz oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003Eps: Repare que no exemplo anterior não inserimos o código da imagem em base64 porque ficaria bem extenso. Mas você pode codificar qualquer imagem para usar \u003Ca class=\"ah ot\" href=\"https:\u002F\u002Fwww.base64-image.de\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Eneste site\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003C\u002Fblockquote\u003E\n\u003Cp id=\"c0b7\" class=\"pw-post-body-paragraph ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003EE ai, o que acharam? Estão prontos para gerar uns PDFs?\u003C\u002Fp\u003E\n\u003Ch3 id=\"6502\" class=\"ou ov ic bg ow fx ox fy fz ga oy gb gc gd oz ge gf gg pa gh gi gj pb gk gl pc bl\" data-selectable-paragraph=\"\"\u003EReferências\u003C\u002Fh3\u003E\n\u003Cul class=\"\"\u003E\n\u003Cli id=\"8cad\" class=\"ny nz ic oa b ob pd od oe of pe oh oi gd pf ok ol gg pg on oo gj ph oq or os qa qb qc bl\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ah ot\" href=\"https:\u002F\u002Fimasters.com.br\u002Ffront-end\u002Fgerando-pdfs-com-js\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fimasters.com.br\u002Ffront-end\u002Fgerando-pdfs-com-js\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Ch3 id=\"46a8\" class=\"ou ov ic bg ow fx ox fy fz ga oy gb gc gd oz ge gf gg pa gh gi gj pb gk gl pc bl\" data-selectable-paragraph=\"\"\u003EVersão em vídeo\u003C\u002Fh3\u003E\n\u003Cp id=\"c8ab\" class=\"pw-post-body-paragraph ny nz ic oa b ob pd od oe of pe oh oi gd pf ok ol gg pg on oo gj ph oq or os hd bl\" data-selectable-paragraph=\"\"\u003EAlém das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!\u003C\u002Fp\u003E\n\u003Cfigure class=\"pi pj pk pl pm nf\"\u003E\n\u003Cdiv class=\"pn eu m em\"\u003E\n\u003Cdiv class=\"po pp m\"\u003E\u003Ciframe class=\"eq o hs eg bi\" title=\"Como gerar arquivos PDF no navegador\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FGYwAi-UJCkE%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DGYwAi-UJCkE&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FGYwAi-UJCkE%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Ffigure\u003E\n\u003Cp id=\"7f2f\" class=\"pw-post-body-paragraph ny nz ic oa b ob oc od oe of og oh oi gd oj ok ol gg om on oo gj op oq or os hd bl\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\n","excerpt":"\u003Cp\u003ENão é novidade nenhuma que o JavaScript hoje é praticamente uma solução universal… Desde aplicações web, até IoT (Internet das Coisas)… arquivos em PDF\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fgerando-arquivos-pdf-com-javascript","date":"6 out, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F09\u002F28163615\u002Fjavascript-2.png","externalMention":null,"author":{"id":144418,"thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":120,"views_count":1428000,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"js","slug":"js","id":3311,"link":"https:\u002F\u002Fimasters.com.br\u002Fjs"},{"title":"pdf","slug":"pdf","id":6775,"link":"https:\u002F\u002Fimasters.com.br\u002Fpdf"}],"seo":{"open_graph":{"title":"Gerando arquivos PDF com JavaScript, de Diego Pinho","description":"Não é novidade nenhuma que o JavaScript hoje é praticamente uma solução universal... Desde aplicações web, até IoT (Internet das Coisas)... arquivos em PDF","type":"article","locale":"pt_BR","site_name":"iMasters - We are Developers","image":{"src":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F09\u002F28163615\u002Fjavascript-2.png","width":800,"height":533},"modified_time":"2025-09-28T16:41:44-03:00","published_time":"2025-10-06T08:12:28-03:00"},"twitter":{"title":"Gerando arquivos PDF com JavaScript, de Diego Pinho","description":"Não é novidade nenhuma que o JavaScript hoje é praticamente uma solução universal... Desde aplicações web, até IoT (Internet das Coisas)... arquivos em PDF","type":"summary_large_image","image":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F09\u002F28163615\u002Fjavascript-2.png"}},"articleSocial":{"facebook":"https:\u002F\u002Fwww.facebook.com\u002Fsharer?u=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fgerando-arquivos-pdf-com-javascript","twitter":"https:\u002F\u002Ftwitter.com\u002Fshare?url=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fgerando-arquivos-pdf-com-javascript","linkedin":"https:\u002F\u002Fwww.linkedin.com\u002FshareArticle?url=https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fgerando-arquivos-pdf-com-javascript"},"type":"post"},{"id":164203,"title":"Mockando um back-end com o JSON Server","content":"\u003Cp id=\"4267\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EVocê já passou por uma situação onde precisava do back-end pronto para implementar\u002Ftestar a integração com o seu front-end? Pois é… isso pode ocorrer com mais frequência do que gostaríamos. É para este e outros cenários semelhantes que eu gostaria de apresentar o JSON Server.\u003C\u002Fp\u003E\n\u003Cp id=\"0abc\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003ECom este pacotinho, conseguiremos “criar um back-end” em menos de 30 segundos que será capaz não somente de armazenar dados, assim como dar suporte para requisições do tipo GET, POST, PUT… etc, seguindo todo o padrão Rest.\u003C\u002Fp\u003E\n\u003Ch2 id=\"c062\" class=\"yc yd sw as ye fk yf fl fm fn yg fo fp mp yh mq mt mu yi mv my mz yj na nd yk cn\" data-selectable-paragraph=\"\"\u003EJSON Server\u003C\u002Fh2\u003E\n\u003Cp id=\"495c\" class=\"pw-post-body-paragraph xh xi sw xj b xk yl xm xn xo ym xq xr fq yn xt xu pu yo xw xx pz yp xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EO \u003Ca class=\"bi ky\" href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fjson-server\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EJSON Server\u003C\u002Fa\u003E é um dos pacotes mais completos que eu já vi no que diz respeito a quantidade de configurações e funcionalidades. Para entender o seu funcionamento, vamos partir de um exemplo prático.\u003C\u002Fp\u003E\n\u003Cp id=\"0df3\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003ECriaremos um novo projeto de front-end usando o parcel e mais algumas dependências. Basta digitar os comandos abaixo no seu terminal de preferência:\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003E\u003Ccode\u003Enpm init -y\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003Enpm i -D parcel\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003Enpm i json-server axios\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003EE depois no \u003Ccode class=\"df zi zj zk za b\"\u003Epackage.json\u003C\u002Fcode\u003E, configure um script para rodar o projeto em um servidor de desenvolvimento:\u003C\u002Fp\u003E\n\u003Cp data-selectable-paragraph=\"\"\u003E\u003Ccode\u003E\"scripts\": {\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003E\"dev\": \"parcel index.html\"\u003C\u002Fcode\u003E\u003Cbr \u002F\u003E\n\u003Ccode\u003E},\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp id=\"6377\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EMuito bem. Para o nosso teste, faremos uma tela com dois botões: um que deverá fazer uma requisição do tipo GET e trazer todos os dados de usuários; e outra que fará uma requisição do tipo POST para cadastrar um novo usuário. Minha intenção é te mostrar que podemos fazer vários tipos de requisições diferentes (como em uma API REST).\u003C\u002Fp\u003E\n\u003Cp id=\"2020\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003ECrie um arquivo \u003Ccode class=\"df zi zj zk za b\"\u003Eindex.html\u003C\u002Fcode\u003E na raiz do projeto com essa estrutura:\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode class=\"language-html\"\u003E<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>JSON Server<\u002Ftitle>\r\n<\u002Fhead>\r\n<body>\r\n <button class=\"search\">Todos os usuários<\u002Fbutton>\r\n <div><input type=\"text\" class=\"user\" \u002F><button class=\"insert\">Inserir usuário<\u002Fbutton><\u002Fdiv>\r\n <script type=\"module\" src=\"index.js\"><\u002Fscript>\r\n<\u002Fbody>\r\n<\u002Fhtml>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003EEm seguida, crie um arquivo index.js na raiz do projeto com essa estrutura:\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode class=\"language-html\"\u003Econst axios = require(\"axios\");\r\nasync function getAllUsers() {\r\n try {\r\n const { data } = await axios.get(\"http:\u002F\u002Flocalhost:3000\u002Fusers\");\r\n console.log(\"users\", data);\r\n } catch (error) {\r\n console.log(\"error\", error);\r\n }\r\n}\r\nasync function addNewUser() {\r\n const user = document.querySelector(\".user\").value;\r\n try {\r\n await axios.post(\"http:\u002F\u002Flocalhost:3000\u002Fusers\", {\r\n name: user\r\n })\r\n } catch (error) {\r\n console.log(\"error\", error);\r\n }\r\n}\r\nwindow.onload = () => {\r\n document.querySelector(\".search\").addEventListener(\"click\", getAllUsers);\r\n document.querySelector(\".insert\").addEventListener(\"click\", addNewUser);\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"56ef\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003ENote que as requisições estão sendo feitas para o \u003Ccode class=\"df zi zj zk za b\"\u003Elocalhost:3000\u003C\u002Fcode\u003E. Este endereço não é por acaso. Por padrão, é neste local que o servidor local do JSON Server irá funcionar.\u003C\u002Fp\u003E\n\u003Cp id=\"f412\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EO primeiro passo para configurar o JSON Server é criarmos um arquivo JSON que será o nosso banco de dados. Crie-o na raiz do projeto. Eu chamarei o meu de \u003Ccode class=\"df zi zj zk za b\"\u003Edb.json\u003C\u002Fcode\u003E e o iniciarei com alguns dados. A estrutura deste arquivo também fica ao seu critério.\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode class=\"language-html\"\u003E{\r\n \"users\": [\r\n {\r\n \"id\": 1,\r\n \"name\": \"diego\"\r\n },\r\n {\r\n \"id\": 2,\r\n \"name\": \"luiza\"\r\n },\r\n {\r\n \"id\": 3,\r\n \"name\": \"marcela\"\r\n },\r\n {\r\n \"id\": 4,\r\n \"name\": \"maria\"\r\n },\r\n {\r\n \"id\": 5,\r\n \"name\": \"gilberto\"\r\n }\r\n ]\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003EFeito isso, tudo o que precisamos fazer agora é criar um script para subir este back-end. Para isso, volte no package.json e crie uma nova instrução:\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode class=\"language-html\"\u003E\"scripts\": {\r\n \"dev\": \"parcel index.html\",\r\n \"dev:json\": \"json-server db.json\"\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"6ffa\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EE se eu te disser que só isso é o sufiente pra fazer tudo funcionar? Abra dois terminais e rode o comando \u003Ccode class=\"df zi zj zk za b\"\u003Enpm run dev\u003C\u002Fcode\u003E em um e \u003Ccode class=\"df zi zj zk za b\"\u003Enpm run dev:json\u003C\u002Fcode\u003E em outro! Pronto! 😃\u003C\u002Fp\u003E\n\u003Ch2 id=\"e6ba\" class=\"yc yd sw as ye fk yf fl fm fn yg fo fp mp yh mq mt mu yi mv my mz yj na nd yk cn\" data-selectable-paragraph=\"\"\u003ECriando uma base aleatória\u003C\u002Fh2\u003E\n\u003Cp id=\"6426\" class=\"pw-post-body-paragraph xh xi sw xj b xk yl xm xn xo ym xq xr fq yn xt xu pu yo xw xx pz yp xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EEm alguns cenários mais complexos, você vai querer uma quantidade maior de dados para testar. É o caso, por exemplo, de uma paginação (que olhem só, tem suporte nativo no JSON Server!). Nestas situações, se torna bastante desgastante ter que ficar criando os dados um por um. E se utilizarmos a biblioteca \u003Ca class=\"bi ky\" href=\"https:\u002F\u002Ffakerjs.dev\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EFaker\u003C\u002Fa\u003E para nos ajudar?\u003C\u002Fp\u003E\n\u003Cp id=\"2f5a\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EO JSON Server disponibiliza uma forma de criar um banco em memória baseado no retorno de uma função. Nesta função, podemos usar o Faker (por exemplo), para gerar os dados do nosso teste. Para ver isso funcionando, crie um novo arquivo na raiz do projeto chamado \u003Ccode class=\"df zi zj zk za b\"\u003Eseed.js\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\n\u003Cp id=\"3b65\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003ENeste arquivo, coloque o seguinte conteúdo:\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode class=\"language-html\"\u003Econst { faker } = require(\"@faker-js\u002Ffaker\");\r\nmodule.exports = () => {\r\n const data = { users: [] };\r\n for(let i = 0; i < 1000; i++) {\r\n data.users.push({\r\n id: i,\r\n name: faker.name.firstName()\r\n })\r\n }\r\n return data;\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003EPerceba que estamos criando 1000 usuários, returnando este array e exportando essa função. Com isso em mãos, basta criarmos um script no \u003Ccode class=\"df zi zj zk za b\"\u003Epackage.json\u003C\u002Fcode\u003E que fará o JSON Server usar estes dados:\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode class=\"language-html\"\u003E\"scripts\": {\r\n \"dev\": \"parcel index.html\",\r\n \"dev:json\": \"json-server db.json\",\r\n \"dev:json:seed\": \"json-server seed.js\"\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp id=\"86c7\" class=\"pw-post-body-paragraph xh xi sw xj b xk xl xm xn xo xp xq xr fq xs xt xu pu xv xw xx pz xy xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EAgora, ao invés de usar o \u003Ccode class=\"df zi zj zk za b\"\u003Enpm run dev:json\u003C\u002Fcode\u003E, só trocar pelo \u003Ccode class=\"df zi zj zk za b\"\u003Enpm run dev:json:seed\u003C\u002Fcode\u003E!\u003C\u002Fp\u003E\n\u003Ch2 id=\"526b\" class=\"yc yd sw as ye fk yf fl fm fn yg fo fp mp yh mq mt mu yi mv my mz yj na nd yk cn\" data-selectable-paragraph=\"\"\u003EConsiderações finais\u003C\u002Fh2\u003E\n\u003Cp id=\"98c8\" class=\"pw-post-body-paragraph xh xi sw xj b xk yl xm xn xo ym xq xr fq yn xt xu pu yo xw xx pz yp xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EO JSON Server está longe de ser a única opção de ferramenta para a criação de mocks de back-end, por outro lado, é muito difícil encontrar ferramentas tão completas e fáceis de usar como essa. Aqui só mostrei pra vocês a pontinha do iceberg, vale entrar na documentação e explorar as possibilidades.\u003C\u002Fp\u003E\n\u003Ch2 id=\"8308\" class=\"yc yd sw as ye fk yf fl fm fn yg fo fp mp yh mq mt mu yi mv my mz yj na nd yk cn\" data-selectable-paragraph=\"\"\u003EEdição em vídeo\u003C\u002Fh2\u003E\n\u003Cp id=\"297f\" class=\"pw-post-body-paragraph xh xi sw xj b xk yl xm xn xo ym xq xr fq yn xt xu pu yo xw xx pz yp xz ya yb lv cn\" data-selectable-paragraph=\"\"\u003EPrefere assistir? Não tem problema, gravei também em vídeo!\u003C\u002Fp\u003E\n\u003Cfigure class=\"yq yr ys yt yu yv\"\u003E\n\u003Cdiv class=\"yw bw y br\"\u003E\n\u003Cdiv class=\"yx yy y\"\u003E\u003Ciframe class=\"bs ab im bb n\" title=\"Back-end rápido para testes com o JSON Server\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FG4RHpXSa7dw%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DG4RHpXSa7dw&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FG4RHpXSa7dw%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Ffigure\u003E\n\u003Cp\u003E \u003C\u002Fp\u003E\n","excerpt":"\u003Cp\u003EVocê já passou por uma situação onde precisava do back-end pronto para implementar\u002Ftestar a integração com o seu front-end? Pois é… isso pode ocorrer…\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fback-end\u002Fmockando-um-back-end-com-o-json-server","date":"16 set, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F09\u002F16095618\u002Fback-end.png","externalMention":null,"author":{"id":144418,"thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":120,"views_count":1428000,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"Back-End","slug":"back-end","id":7158,"link":"https:\u002F\u002Fimasters.com.br\u002Fback-end"}],"tags":[{"title":"back-end","slug":"back-end","id":404,"link":"https:\u002F\u002Fimasters.com.br\u002Fback-end"},{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"json","slug":"json","id":532,"link":"https:\u002F\u002Fimasters.com.br\u002Fjson"},{"title":"JSON Server","slug":"json-server","id":9301,"link":"https:\u002F\u002Fimasters.com.br\u002Fjson-server"}],"seo":{"open_graph":{"title":"Artigo: Mockando um back-end com o JSON Server","description":"Você já passou por uma situação onde precisava do back-end pronto para implementar\u002Ftestar a integração com o seu front-end? Pois é… isso pode ocorrer...","type":"article","locale":"pt_BR","site_name":"iMasters - We are Developers","image":{"src":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F09\u002F16095618\u002Fback-end.png","width":800,"height":533},"modified_time":"2025-09-16T10:05:11-03:00","published_time":"2025-09-16T10:05:11-03:00"},"twitter":{"title":"Artigo: Mockando um back-end com o JSON Server","description":"Você já passou por uma situação onde precisava do back-end pronto para implementar\u002Ftestar a integração com o seu front-end? Pois é… isso pode ocorrer...","type":"summary_large_image","image":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F09\u002F16095618\u002Fback-end.png"}},"articleSocial":{"facebook":"https:\u002F\u002Fwww.facebook.com\u002Fsharer?u=https:\u002F\u002Fimasters.com.br\u002Fback-end\u002Fmockando-um-back-end-com-o-json-server","twitter":"https:\u002F\u002Ftwitter.com\u002Fshare?url=https:\u002F\u002Fimasters.com.br\u002Fback-end\u002Fmockando-um-back-end-com-o-json-server","linkedin":"https:\u002F\u002Fwww.linkedin.com\u002FshareArticle?url=https:\u002F\u002Fimasters.com.br\u002Fback-end\u002Fmockando-um-back-end-com-o-json-server"},"type":"post"},{"id":164044,"title":"O básico de animações para programadores (as) — ou para quem não manja nada","content":"\u003Cdiv class=\"ld sc sd ki se\"\u003E\n\u003Cdiv class=\"o q\"\u003E\n\u003Cdiv class=\"di n rq rr rs lc\"\u003E\n\u003Cp id=\"f1b9\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EVocê tem pouca habilidade artística (assim como eu, rs) ou te falta conhecimento sobre o processo criativo de animações \u003Cstrong class=\"xu si\"\u003EMAS\u003C\u002Fstrong\u003E ainda sim você deseja ingressar nesse mundo divertidíssimo? Seja bem-vindo(a) ao clube! Neste artigo conheceremos o \u003Ca class=\"bf kg\" href=\"https:\u002F\u002Fwww.wickeditor.com\u002F#\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EWick Editor\u003C\u002Fa\u003E, uma ferramenta poderosa, intuitiva e gratuita de animações.\u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"o q yn yo yp yq\" role=\"separator\"\u003E\n\u003Cdiv class=\"ld sc sd ki se\"\u003E\n\u003Cdiv class=\"o q\"\u003E\n\u003Cdiv class=\"di n rq rr rs lc\"\u003E\n\u003Ch2 id=\"0997\" class=\"yu yv sh as yw mv yx mw er my yy mz eu ev yz ew ex pe za pf pi pj zb pk pn zc bx\" data-selectable-paragraph=\"\"\u003EAnimações para programadores (as) – A Interface do Editor\u003C\u002Fh2\u003E\n\u003Cp id=\"4e15\" class=\"pw-post-body-paragraph xs xt sh xu b xv zd xx xy xz ze yb yc ev zf ye yf pe zg yh yi pj zh yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EFazer animações pode ser um processo bastante trabalhoso, no entanto, o editor que apresentarei faz o possível para tornar essa tarefa o mais fácil e divertida possível.\u003C\u002Fp\u003E\n\u003Cp id=\"66dd\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EO \u003Ca class=\"bf kg\" href=\"https:\u002F\u002Fwww.wickeditor.com\u002F#\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"xu si\"\u003EWick Editor\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E é um projeto de código aberto que funciona inteiramente na web. Ou seja, basta ânimo, um computador, uma conexão estável com a internet e um navegador para começar.\u003C\u002Fp\u003E\n\u003Cp id=\"9c52\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EO primeiro passo é acessar o editor \u003Ca class=\"bf kg\" href=\"https:\u002F\u002Feditor.wickeditor.com\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"xu si\"\u003Eneste link\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"wv\"\u003E\n\u003Cdiv class=\"o q\"\u003E\n\u003Cdiv class=\"ww ky wx kz wy la df ie dg if di n\"\u003E\n\u003Cfigure class=\"zi zj zk zl zm wv xh xi paragraph-image\"\u003E\n\u003Cdiv class=\"xj xk cg xl n xm\" tabindex=\"0\" role=\"button\"\u003E\u003Cspan class=\"cr hi xn ae xo gr xp nr xq speechify-ignore\"\u003EPress enter or click to view image in full size\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"xj xk cg xl n xm\" tabindex=\"0\" role=\"button\"\u003E\n\u003Cdiv class=\"wz xa zu\"\u003E\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"wz xa zu\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002Fformat:webp\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 2000w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png 2000w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"n qu xr c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:938\u002F1*_1CPAwrQK9qaHZ6Gh7NwOg.png\" alt=\"\" width=\"1000\" height=\"543\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"zq gn zr wz xa zs zt as b bu an ap\" data-selectable-paragraph=\"\"\u003EPágina inicial do Editor\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"o q\"\u003E\n\u003Cdiv class=\"di n rq rr rs lc\"\u003E\n\u003Cp id=\"7064\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003ESe alguma vez você já trabalhou com o antigo Adobe Flash (hoje chamado de \u003Ca class=\"bf kg\" href=\"https:\u002F\u002Fwww.adobe.com\u002Fbr\u002Fproducts\u002Fanimate.html\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EAdobe Animate\u003C\u002Fa\u003E), vai notar vários elementos parecidos na interface. Na parte superior temos as opções clássicas de softwares de edição: seleção, pincel, lápis, borracha, quadrado, elipse, linha, texto… até as cores de preenchimento e contorno.\u003C\u002Fp\u003E\n\u003Cp id=\"0be7\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003ENo canto direito desta mesma barra temos outros elementos importantes: alinhamento, lixeira, copiar, voltar e avançar.\u003C\u002Fp\u003E\n\u003Cp id=\"bfb2\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003ELogo abaixo, temos o \u003Cem class=\"zv\"\u003Ecanvas\u003C\u002Fem\u003E, também chamada de área de desenho. Aqui não há muito segredo, é o espaço onde todo o trabalho deverá ser feito usando as ferramenta de desenho já citadas.\u003C\u002Fp\u003E\n\u003Ch2 id=\"238a\" class=\"yu yv sh as yw mv yx mw er my yy mz eu ev yz ew ex pe za pf pi pj zb pk pn zc bx\" data-selectable-paragraph=\"\"\u003EA Linha do Tempo\u003C\u002Fh2\u003E\n\u003Cp id=\"2ff0\" class=\"pw-post-body-paragraph xs xt sh xu b xv zd xx xy xz ze yb yc ev zf ye yf pe zg yh yi pj zh yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EToda vez que pensamos em uma animação, precisamos lembrar de que ela nada mais é do que uma ilusão, ou seja, são inúmeros desenhos passados rapidamente que são dão a impressão de que algo está se mexendo. Para cada um destes desenhos damos o nome de \u003Cem class=\"zv\"\u003Eframe\u003C\u002Fem\u003E.\u003C\u002Fp\u003E\n\u003Cp id=\"69d8\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EVocê já deve ter ouvido falar neste termo, certo? Seja em jogos, na sua câmera ou celular… a quantidade de \u003Cem class=\"zv\"\u003Eframes\u003C\u002Fem\u003E que são passados por segundo ditam o ritmo em que essa animação (ou vídeo) será transmitido. Por padrão, uma animação com transições suaves trabalha entre 24 a 30 frames por segundo (se lembra que eu disse que o processo era trabalhoso?), mas para quem está começando, dá para fazer muita coisa legal com uma taxa bem menor.\u003C\u002Fp\u003E\n\u003Cblockquote class=\"zw zx zy\"\u003E\n\u003Cp id=\"2c6d\" class=\"xs xt zv xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EEu, por exemplo, costumo trabalhar na faixa dos 12 frames por segundo.\u003C\u002Fp\u003E\n\u003C\u002Fblockquote\u003E\n\u003Cp id=\"dba2\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EE como podemos saber quantos \u003Cem class=\"zv\"\u003Eframes\u003C\u002Fem\u003E nós temos? Para isso se faz necessário usar a linha do tempo que fica logo abaixo do \u003Cem class=\"zv\"\u003Ecanvas\u003C\u002Fem\u003E. Essa linha do tempo é dividida em \u003Cem class=\"zv\"\u003Eframes\u003C\u002Fem\u003E e, toda vez que você faz um desenho no \u003Cem class=\"zv\"\u003Ecanvas\u003C\u002Fem\u003E, a bolinha fica preenchida dentro da linha do tempo.\u003C\u002Fp\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"wv\"\u003E\n\u003Cdiv class=\"o q\"\u003E\n\u003Cdiv class=\"ww ky wx kz wy la df ie dg if di n\"\u003E\n\u003Cfigure class=\"zi zj zk zl zm wv xh xi paragraph-image\"\u003E\n\u003Cdiv class=\"xj xk cg xl n xm\" tabindex=\"0\" role=\"button\"\u003E\u003Cspan class=\"cr hi xn ae xo gr xp nr xq speechify-ignore\"\u003EPress enter or click to view image in full size\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\n\u003Cdiv tabindex=\"0\" role=\"button\"\u003E\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"xj xk cg xl n xm\" tabindex=\"0\" role=\"button\"\u003E\n\u003Cdiv class=\"wz xa zz\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002Fformat:webp\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 2000w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png 2000w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"n qu xr c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:938\u002F1*Gv3Humtr9tXaZdSqZOTHaw.png\" alt=\"\" width=\"1000\" height=\"727\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"zq gn zr wz xa zs zt as b bu an ap\" data-selectable-paragraph=\"\"\u003EFrames e a Linha do Tempo\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"o q\"\u003E\n\u003Cdiv class=\"di n rq rr rs lc\"\u003E\n\u003Cp id=\"959e\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003ENote que no desenho acima temos dois desenhos, no entanto, em condições diferentes. O primeiro desenho ocupa o espaço de 4 \u003Cem class=\"zv\"\u003Eframes\u003C\u002Fem\u003E, enquanto o segundo ocupa o espaço de 1 \u003Cem class=\"zv\"\u003Eframe\u003C\u002Fem\u003E. Conseguimos fazer isso apenas arrastando no frame em que estamos trabalhando.\u003C\u002Fp\u003E\n\u003Cp id=\"e02d\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EAlém disso, notou que um dos desenhos está transparente? Esse recurso é que o chamamos de \u003Cem class=\"zv\"\u003Eonion skinning. \u003C\u002Fem\u003EEste recurso funciona como um papel vegetal digital: é possível ver o desenho anterior para ter uma base para desenhar o passo seguinte.\u003C\u002Fp\u003E\n\u003Cblockquote class=\"zw zx zy\"\u003E\n\u003Cp id=\"38da\" class=\"xs xt zv xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EEssa opção é habilitada na barra de opções que fica no canto inferior direito do canvas.\u003C\u002Fp\u003E\n\u003C\u002Fblockquote\u003E\n\u003Ch2 id=\"627e\" class=\"yu yv sh as yw mv yx mw er my yy mz eu ev yz ew ex pe za pf pi pj zb pk pn zc bx\" data-selectable-paragraph=\"\"\u003ESalvando e Exportando\u003C\u002Fh2\u003E\n\u003Cp id=\"f072\" class=\"pw-post-body-paragraph xs xt sh xu b xv zd xx xy xz ze yb yc ev zf ye yf pe zg yh yi pj zh yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003ESomente com esses conceitos você já é capaz de criar suas primeiras animações. Uma vez que você terminou (ou deseja continuar depois), é necessário acessar o menu superior direito da ferramenta.\u003C\u002Fp\u003E\n\u003Cfigure class=\"zi zj zk zl zm wv wz xa paragraph-image\"\u003E\n\u003Cdiv class=\"wz xa aba\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1052\u002Fformat:webp\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 1052w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 526px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1052\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png 1052w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 526px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"n qu xr c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:493\u002F1*vQG3lTvr9TDDcQQbbYCW7Q.png\" alt=\"\" width=\"526\" height=\"187\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"zq gn zr wz xa zs zt as b bu an ap\" data-selectable-paragraph=\"\"\u003EMenu superior direito\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003Cp id=\"da6f\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EAs duas primeiras opções criam e abre um novo projeto, respectivamente. Já a opção de exportar deve ser acessada quando o seu projeto estiver finalizado. Nesta janela, você terá a opção de gerar um gif, vídeo ou código HTML5 para sua animação.\u003C\u002Fp\u003E\n\u003Cfigure class=\"zi zj zk zl zm wv wz xa paragraph-image\"\u003E\n\u003Cdiv class=\"xj xk cg xl n xm\" tabindex=\"0\" role=\"button\"\u003E\u003Cspan class=\"cr hi xn ae xo gr xp nr xq speechify-ignore\"\u003EPress enter or click to view image in full size\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"xj xk cg xl n xm\" tabindex=\"0\" role=\"button\"\u003E\n\u003Cdiv class=\"wz xa abb\"\u003E\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"wz xa abb\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"n qu xr c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:656\u002F1*Ej6oV4oQSLw0K8oq7nSIxg.png\" alt=\"\" width=\"700\" height=\"360\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"zq gn zr wz xa zs zt as b bu an ap\" data-selectable-paragraph=\"\"\u003EExportação do projeto\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003Cp id=\"6b90\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EA opção de salvar fará o download de um arquivo .wick no seu computador. \u003Cstrong class=\"xu si\"\u003EPara toda vez que você salvar o projeto, ele criará um arquivo novo.\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Cp id=\"2ec7\" class=\"pw-post-body-paragraph xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EPor fim, temos a engrenagem. Nesta janela, poderemos fazer algumas configurações globais sobre a animação, como por exemplo, selecionar a cor de fundo, dimensões do \u003Cem class=\"zv\"\u003Ecanvas\u003C\u002Fem\u003E, taxa de frames, atalhos, etc.\u003C\u002Fp\u003E\n\u003Ch2 id=\"fae5\" class=\"yu yv sh as yw mv yx mw er my yy mz eu ev yz ew ex pe za pf pi pj zb pk pn zc bx\" data-selectable-paragraph=\"\"\u003EConclusão\u003C\u002Fh2\u003E\n\u003Cp id=\"c586\" class=\"pw-post-body-paragraph xs xt sh xu b xv zd xx xy xz ze yb yc ev zf ye yf pe zg yh yi pj zh yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EO Wick Editor é um editor excelente para iniciantes e que fornece recursos profissionais para todos os gostos. Sua utilização é simples e segue os mesmo princípios de outros software de animações. Seu ponto negativo talvez esteja na questão de não possuir uma opção para salvar na conta, uma vez que o projeto não exige nenhum tipo de login. Mas tirando esse detalhe, a ferramenta é uma ótima opção para entusiastas e saudosistas do bom e velho flash.\u003C\u002Fp\u003E\n\u003Cdiv class=\"ld sc sd ki se\"\u003E\n\u003Cdiv class=\"o q\"\u003E\n\u003Cdiv class=\"di n rq rr rs lc\"\u003E\n\u003Ch3 id=\"13b8\" class=\"yu yv sh as yw mv yx mw er my yy mz eu ev yz ew ex pe za pf pi pj zb pk pn zc bx\"\u003EVersão em Vídeo\u003C\u002Fh3\u003E\n\u003Cp id=\"1b2f\" class=\"pw-post-body-paragraph xs xt sh xu b xv zd xx xy xz ze yb yc ev zf ye yf pe zg yh yi pj zh yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003EAlém das instruções que darei abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!\u003C\u002Fp\u003E\n\u003Cfigure class=\"zi zj zk zl zm wv\"\u003E\n\u003Cdiv class=\"zn gr y cg\"\u003E\n\u003Cdiv class=\"zo zp y\"\u003E\u003Ciframe class=\"cr ab ht bb n\" title=\"Animações para quem ainda não MANJA NADA! - Conheça o Wick Editor (fácil e gratuito!)\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FPtRvgi0tFOM%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DPtRvgi0tFOM&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FPtRvgi0tFOM%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\u003Cfigcaption class=\"zq gn zr wz xa zs zt as b bu an ap\"\u003EInscreva-se no nosso canal!\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Ch3 class=\"o q yn yo yp yq\" role=\"separator\"\u003EAgradecimentos\u003C\u002Fh3\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cdiv class=\"ld sc sd ki se\"\u003E\n\u003Cdiv class=\"o q\"\u003E\n\u003Cdiv class=\"di n rq rr rs lc\"\u003E\n\u003Cp id=\"eb53\" class=\"pw-post-body-paragraph xs xt sh xu b xv zd xx xy xz ze yb yc ev zf ye yf pe zg yh yi pj zh yk yl ym ld bx\" data-selectable-paragraph=\"\"\u003ECurtiu? Então dê uma passada no meu canal no Youtube ou me procure nas redes sociais para trocarmos uma ideia!\u003C\u002Fp\u003E\n\u003Cul class=\"\"\u003E\n\u003Cli id=\"a3c4\" class=\"xs xt sh xu b xv xw xx xy xz ya yb yc ev yd ye yf pe yg yh yi pj yj yk yl ym abj abk abl bx\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"bf kg\" href=\"https:\u002F\u002Fwww.youtube.com\u002F@ProfDiegoPinho\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EYoutube\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli id=\"51cd\" class=\"xs xt sh xu b xv abm xx xy xz abn yb yc ev abo ye yf pe abp yh yi pj abq yk yl ym abj abk abl bx\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"bf kg\" href=\"https:\u002F\u002Fwww.diegopinho.com.br\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003ESite\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n","excerpt":"\u003Cp\u003EVocê tem pouca habilidade artística ou te falta conhecimento sobre o processo criativo de animações… Animações para programadores (as)…\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fcarreira-dev\u002Fo-basico-de-animacoes-para-programadores-as-ou-para-quem-nao-manja-nada","date":"18 ago, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F08\u002F15104023\u002FCarreira-Dev.png","externalMention":null,"author":{"id":144418,"thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":120,"views_count":1428000,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"Carreira Dev","slug":"carreira-dev","id":7265,"link":"https:\u002F\u002Fimasters.com.br\u002Fcarreira-dev"}],"tags":[{"title":"animação","slug":"animacao","id":3409,"link":"https:\u002F\u002Fimasters.com.br\u002Fanimacao"},{"title":"animações","slug":"animacoes","id":3420,"link":"https:\u002F\u002Fimasters.com.br\u002Fanimacoes"},{"title":"anime","slug":"anime","id":9278,"link":"https:\u002F\u002Fimasters.com.br\u002Fanime"},{"title":"design","slug":"design-2","id":240,"link":"https:\u002F\u002Fimasters.com.br\u002Fdesign-2"},{"title":"dev","slug":"dev","id":954,"link":"https:\u002F\u002Fimasters.com.br\u002Fdev"},{"title":"edição","slug":"edicao","id":4038,"link":"https:\u002F\u002Fimasters.com.br\u002Fedicao"},{"title":"programação","slug":"programacao","id":419,"link":"https:\u002F\u002Fimasters.com.br\u002Fprogramacao"},{"title":"software de animação","slug":"software-de-animacao","id":9279,"link":"https:\u002F\u002Fimasters.com.br\u002Fsoftware-de-animacao"}],"seo":{"open_graph":{"title":"Animações para programadores (as) ou pra quem não manja nada","description":"Você tem pouca habilidade artística ou te falta conhecimento sobre o processo criativo de animações... Animações para programadores (as)...","type":"article","locale":"pt_BR","site_name":"iMasters - We are Developers","image":{"src":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F08\u002F15104023\u002FCarreira-Dev.png","width":800,"height":533},"modified_time":"2025-08-15T10:42:02-03:00","published_time":"2025-08-18T09:15:55-03:00"},"twitter":{"title":"Animações para programadores (as) ou pra quem não manja nada","description":"Você tem pouca habilidade artística ou te falta conhecimento sobre o processo criativo de animações... Animações para programadores (as)...","type":"summary_large_image","image":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F08\u002F15104023\u002FCarreira-Dev.png"}},"articleSocial":{"facebook":"https:\u002F\u002Fwww.facebook.com\u002Fsharer?u=https:\u002F\u002Fimasters.com.br\u002Fcarreira-dev\u002Fo-basico-de-animacoes-para-programadores-as-ou-para-quem-nao-manja-nada","twitter":"https:\u002F\u002Ftwitter.com\u002Fshare?url=https:\u002F\u002Fimasters.com.br\u002Fcarreira-dev\u002Fo-basico-de-animacoes-para-programadores-as-ou-para-quem-nao-manja-nada","linkedin":"https:\u002F\u002Fwww.linkedin.com\u002FshareArticle?url=https:\u002F\u002Fimasters.com.br\u002Fcarreira-dev\u002Fo-basico-de-animacoes-para-programadores-as-ou-para-quem-nao-manja-nada"},"type":"post"}]},"categories":[{"title":"APIs e Microsserviços","slug":"apis-microsservicos","id":4257,"link":"https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos"},{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"api","slug":"api","id":187,"link":"https:\u002F\u002Fimasters.com.br\u002Fapi"},{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"node","slug":"node","id":236,"link":"https:\u002F\u002Fimasters.com.br\u002Fnode"},{"title":"nodejs","slug":"nodejs","id":3153,"link":"https:\u002F\u002Fimasters.com.br\u002Fnodejs"}],"seo":{"open_graph":{"title":"Validações mais felizes na sua API com a biblioteca Joi","description":"Para garantir o funcionamento correto das nossas APIs e evitar problemas é super importante sempre validar a entrada dos nossos usuários. No entanto...","type":"article","locale":"pt_BR","site_name":"iMasters - We are Developers","image":{"src":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F07\u002F26183954\u002FAPIs.jpg","width":800,"height":533},"modified_time":"2025-05-26T18:42:22-03:00","published_time":"2025-07-07T09:24:22-03:00"},"twitter":{"title":"Validações mais felizes na sua API com a biblioteca Joi","description":"Para garantir o funcionamento correto das nossas APIs e evitar problemas é super importante sempre validar a entrada dos nossos usuários. No entanto...","type":"summary_large_image","image":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F07\u002F26183954\u002FAPIs.jpg"}},"articleSocial":{"facebook":"https:\u002F\u002Fwww.facebook.com\u002Fsharer?u=https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos\u002Fvalidacoes-mais-felizes-na-sua-api-com-a-biblioteca-joi","twitter":"https:\u002F\u002Ftwitter.com\u002Fshare?url=https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos\u002Fvalidacoes-mais-felizes-na-sua-api-com-a-biblioteca-joi","linkedin":"https:\u002F\u002Fwww.linkedin.com\u002FshareArticle?url=https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos\u002Fvalidacoes-mais-felizes-na-sua-api-com-a-biblioteca-joi"},"type":"post","articleViews":false}},"author":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":{}},"category":{"success":false,"data":{}},"categoryArticles":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":{}},"categoryMostRead":{"success":false,"data":{}},"home":{"success":false,"featured":[],"options":{"homeProducts":[]},"allCategories":{},"featuredArticles":{},"magazines":{"data":[]},"tv":{},"forums":[],"authorsRanking":{},"events":{},"certificatedUsers":[],"news":[]},"page":{"success":false,"data":{}},"magazine":{"success":false,"magazines":[]},"schedule":{"success":false,"data":{}},"searchResult":{"success":false,"totalPosts":0,"totalPage":0,"currentPage":1,"posts":[],"term":"","orderBy":"recents","currentFilter":"articles","isLoading":true,"isLoadingPagination":false},"singleNews":{"success":false,"data":{}},"listNews":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":[]},"sponsors":{"success":true,"data":[]},"header":{"success":true,"menus":{"main":[{"ID":138755,"order":1,"parent":0,"title":"Back-End","url":"https:\u002F\u002Fimasters.com.br\u002Fback-end","attr":"package","target":"","classes":"package","xfn":"","description":"Tecnologias utilizadas no backend da aplicação","object_id":7158,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138756,"order":2,"parent":0,"title":"Mobile","url":"https:\u002F\u002Fimasters.com.br\u002Fmobile","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre Desenvolvimento Mobile nas plataformas iOS (iPhone e iPad) e Android.","object_id":4255,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":139476,"order":3,"parent":0,"title":"Front End","url":"https:\u002F\u002Fimasters.com.br\u002Ffront-end","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre HTML5, CSS3, Javascript, JQuery, Web Standards e SEO.","object_id":7304,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138764,"order":4,"parent":0,"title":"DevSecOps","url":"https:\u002F\u002Fimasters.com.br\u002Fdevsecops","attr":"package","target":"","classes":"package","xfn":"","description":"","object_id":1,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":139204,"order":5,"parent":0,"title":"Design & UX","url":"https:\u002F\u002Fimasters.com.br\u002Fdesign-ux","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre User Experience, Arquitetura de Informação, Usabilidade, Acessibilidade, Design Responsivo, Teoria do Design e Photoshop.","object_id":7252,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138759,"order":6,"parent":0,"title":"Data","url":"https:\u002F\u002Fimasters.com.br\u002Fdata","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre Banco de Dados Oracle, MySQL, SQL Server, MongoDB, DB2 e Postgre SQL, sobre BI e análise de dados.","object_id":16,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138758,"order":7,"parent":0,"title":"APIs e Microsserviços","url":"https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos","attr":"package","target":"","classes":"package","xfn":"","description":"Dicas e tutoriais sobre APIs públicas como Facebook, Twitter, PayPal, Buscapé, Google, etc e arquitetura de microsserviços, com códigos de exemplo, vídeos, cursos.","object_id":4257,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]}],"secondary":[{"ID":138752,"order":1,"parent":0,"title":"Fórum iMasters","url":"https:\u002F\u002Fforum.imasters.com.br\u002F","attr":"","target":"_blank","classes":"","xfn":"","description":"","object_id":138752,"object":"custom","type":"custom","type_label":"Link personalizado","children":[]},{"ID":139067,"order":2,"parent":0,"title":"Portal E-Commerce Brasil","url":"http:\u002F\u002Fwww.ecommercebrasil.com.br","attr":"","target":"","classes":"","xfn":"","description":"","object_id":139067,"object":"custom","type":"custom","type_label":"Link personalizado","children":[]},{"ID":156289,"order":3,"parent":0,"title":"iMasters Business","url":"http:\u002F\u002Fbusiness.imasters.com.br","attr":"","target":"","classes":"","xfn":"","description":"","object_id":156289,"object":"custom","type":"custom","type_label":"Link personalizado","children":[]}]}},"webinar":{"success":false,"data":{}},"webinars":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":{"next":[],"prev":[]}},"tv":{"sectionNameLeft":{"small":"Vídeos","large":"iMasters TV"},"itemsLeft":[{"text":"Em Destaque","slug":"recents"},{"text":"Mais Vistos","slug":"most-viewed"}],"sectionNameRight":{"small":"","large":""},"itemsRight":[{"text":"Mais Recentes","slug":"recents"},{"text":"7Masters","slug":"7-masters"},{"text":"PHP Experience","slug":"php-experience"},{"text":"Android DevConference","slug":"android-devconference"},{"text":"Busca","slug":"search"}],"currentVideo":"recents","currentListVideo":"recents"}} window.__SERVER_VARS__ = {"applicationRestUrl":"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-json","applicationBaseUrl":"https:\u002F\u002Fadmin.imasters.com.br"} )).required(), }); app.post("/users", (req, res) => { const user = req.body; if(!username || !email || !year || !password) { return res.status(422).send("Incomplete data."); } // restante do código });
import joi from "joi";

const userSchema = joi.object({
  username: joi.string().min(3).max(10).required(),
  email: joi.string().email().required(),
  year: joi.number().integer().min(1900).max(2024).required(),
  password: joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}
)).required(),
});

app.post("/users", (req, res) => { 
  const user = req.body; 
    const validation = userSchema.validate(user, { abortEarly: false });
   if (validation.error) {
     const errors = validation.error.details.map(detail => detail.message)
     return res.status(422).send(errors)
   }
  
  // restante do código 
});

Repositório

https://github.com/Professor-DiegoPinho/validacao-joi

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Diego Pinho

edit113 Artigo(s)

Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.