Ferramentas gratuitas para desenvolvimento web
![Ferramentas gratuitas para desenvolvimento web](/content/images/size/w2000/2024/07/-----REVELO-BLOG----Ferramentas-gratuitas-para-desenvolvimento-web.png)
Como desenvolvedor(a) web, é importante manter familiaridade com ferramentas que apoiem a simplificação e otimização do trabalho diário. Conhecê-las não só agiliza o processo de desenvolvimento, mas também garante a qualidade e confiabilidade do produto final, sem esquecer que, ao estar ciente das ferramentas atualizadas disponíveis no mercado, proporciona uma vantagem competitiva.
Neste artigo, menciono quatro ferramentas que serão de grande utilidade. Tenho a certeza de que são de grande ajuda, pois em algum momento as usei e continuo a usá-las nas minhas tarefas como desenvolvedora.
![](https://community.revelo.com.br/content/images/2024/07/CTA_Blog_Revelo--3---1--2.png)
📌 Mermaid
Logo do mermaid.js.
Mermaid é uma ferramenta de documentação muito fácil de usar que permite criar diagramas de maneira rápida. Funciona criando até gráficos tediosos ou complexos com muita precisão, tudo conforme as necessidades de cada projeto. Sua versatilidade a torna adequada para contextos profissionais onde é necessária uma visualização de informações com base em diagramas. Embora seja baseada em JavaScript, sua sintaxe é inspirada em Markdown.
Entre os diagramas que você pode criar, estão:
1. Diagrama de estados ou State Diagram: É usado para descrever o comportamento de um sistema, das mudanças que resultam pela execução de um evento.
Por exemplo: Um pequeno diagrama de estado, simulando ir à loja onde podemos encontrar ou não um produto.
💡 Neste exemplo, veremos que a sintaxe é similar ao plantUml, pois tenta ser o mais compatível possível para facilitar a compreensão dos usuários e assim possa compartilhar os trabalhos realizados.
💡Para seguir o exemplo, Mermaid tem à disposição uma página onde você pode criar e visualizar os diagramas ao vivo, acessando este link.
---
title: Exemplo Diagrama de Estado
---
stateDiagram-v2
[*] --> Ir_à_loja
Sair --> [*]
Ir_à_loja --> Procurar_produto
Procurar_produto --> Produto_encontrado
Procurar_produto --> Produto_não_encontrado
Produto_encontrado --> Ir_para_o_caixa
Produto_não_encontrado --> Sair
Ir_para_o_caixa --> Sair
Pode-se observar que, com algumas poucas linhas de código, temos um diagrama pronto e muito estético. Além disso, podemos adicionar detalhes ao diagrama, tais como:
Comentários: Estes são feitos adicionando o sinal de porcentagem duas vezes, seguido do que você quiser escrever, assim:
%% este é um comentário
Textos nos estados: Se você quiser adicionar texto nas transições dos estados, pode fazer isso adicionando dois pontos seguido da palavra, desta maneira:
Ir_à_loja --> Procurar_produto : para
Se você quiser mostrar escolhas representadas de uma melhor maneira, considere fazer isso desta maneira:
state comprar <<choice>>
[*] --> Ir_ao_mercado
Ir_al_mercado --> comprar
comprar --> Comida: if dinero > 0
comprar --> Nada : if dinero <= 0
Comida --> Buscar_producto
Nada --> Salir
O qual, adicionando ao código anterior, é representado da seguinte maneira, onde depende se há dinheiro ou não, é onde se procura o produto.
Opcionalmente, se você desejar adicionar algumas pequenas notas, também pode incluí-las adicionando ao código:
note right of comprar
a nota que você
desejar escrever
end note
Se você gostaria de usar esta opção em seus projetos, integrá-la é muito fácil. Aqui, mostro um exemplo de como fazer isso com um projeto em JavaScript vanilla.
👉 Estarei usando VSC como editor de código.
Passo 1: Crie um arquivo .html, neste caso chamado index.html.
Passo 2: Escreva a sintaxe básica de um arquivo HTML.
Passo 3: Adicione o CDN do Mermaid.js no seu arquivo, o qual é:
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.8.0/dist/mermaid.min.js">
</script>
Passo 4: Deve-se adicionar o script de inicialização do Mermaid.js, o qual além de inicializar, configura o Mermaid para que o diagrama seja renderizado assim que a página terminar de carregar.
<script>mermaid.initialize({startOnLoad:true});</script>
Paso 5: Crie um contêiner onde você terá todo o código Mermaid que usará. Sempre deve estar dentro de um componente pai que tenha uma classe chamada mermaid, isso para que a biblioteca saiba onde renderizar e encontrar o conteúdo. Copiando o exemplo anterior, fica da seguinte maneira:
<div class="mermaid">
---
title: Ejemplo Diagrama de Estado
---
stateDiagram-v2
[*] --> Ir_à_loja
Sair --> [*]
Ir_à_loja --> Procurar_produto
Procurar_producto --> Produto_encontrado
Procurar_producto --> Produto_não_encontrado
Produto_encontrado --> Ir_para_o_caixa
Produto_não_encontrado --> Salir
Ir_para_o_caixa --> Sair
[*] --> Ir_ao_mercado
Ir_ao_mercado --> comprar
comprar --> Comida: se dinheiro > 0
comprar --> Nada : se dinheiro <= 0
Comida --> Procurar_producto
Nada --> Sair
</div>
Paso 6: Pronto! Agora visualize seu arquivo HTML em um navegador e poderá observar o diagrama já incorporado.
👉 Se desejar visualizar o código completo, compartilho o link do código aqui.
2. Diagramas Mentais: Esses diagramas representam conceitos que se relacionam entre si a partir de uma palavra-chave, expandindo-se para organizar a informação.
Aplicando no Mermaid, ficaria da seguinte maneira:
Em código, o diagrama fica assim:
mindmap
root((Desenvolvimento Web))
FrontEnd
))Angular((
))Vue((
))React((
BackEnd
)Nest(
)NodeJS(
iCloud
{{AWS}}
{{Azure}}
💡Importante deixar os espaçamentos de cada linha de código.
Se neste momento você considerar usar esta biblioteca, recomendo que leia toda a sua documentação. O repositório está livre no GitHub e sua página oficial, onde terá à sua disposição muitos exemplos e maneiras de integrar todos os diagramas que precisar na documentação dos projetos.
📌JSON Crack
Logo do JSON Crack.
Ferramenta excelente para desenvolvedores porque mostra de maneira gráfica, detalhadamente, a forma como está estruturado qualquer elemento JSON. Também suporta YAML, XML, TOML e CVS.
Este editor mostra sincronizadamente as mudanças em tempo real que fazemos no arquivo, além de permitir baixar como arquivo SVG, PNG ou JPEG, este último sendo um grande acréscimo para poder compartilhar a imagem sem perder qualidade no processo.
Convido você a visitar o sitio oficial da plataforma e verá que observar a informação desta maneira contribui para uma compreensão mais rápida da mesma.
O exemplo que usei para criar a imagem anterior é o seguinte:
{
"empresa": "Empresa Exemplo",
"empregados": [
{
"nome": "Juan",
"cargo": "Gerente",
"departamento": "Redes",
"colaboradores": [
{
"nome": "María",
"cargo": "Soporte",
"departamento": "Redes"
},
{
"nome": "Carlos",
"cargo": "Asistente",
"departamento": "Redes"
}
]
},
{
"nome": "Laura",
"cargo": "Jefe de Desarrolladores",
"departamento": "Desarrollo",
"colaboradores": [
{
"nome": "Pedro",
"cargo": "Programador",
"departamento": "Desarrollo"
},
{
"nome": "Ana",
"cargo": "Analista de sistema",
"departamento": "Desarrollo"
}
]
},
{
"nome": "Karla",
"cargo": "Encargada Devops",
"departamento": "Infraestructura"
}
]
}
📌 JSON data AI
É um gerador de API que funciona com inteligência artificial e é muito fácil de usar, ideal para pequenos projetos onde você precisa consumir pequenas APIs, ou quando está experimentando novos conhecimentos e precisa de informações que não necessariamente sejam reais.
Exemplo prático
Esta é a interface onde você pode gerar sua API. Como se pode ver, é muito intuitivo, pois precisa de um tema, neste caso: Top de séries animadas para adultos em 2022, adicionando propriedades de:
- name: Nome da série.
- author: Criador ou criadores da série.
- year: Ano de publicação.
Você pode escolher o tipo de dado, escrever uma breve descrição da propriedade, além de adicionar ou excluir propriedades à vontade. Também é possível ver na parte superior o limite de elementos que a API terá. Quando estiver pronto, clique no botão branco que diz Get JSON Data. No meu caso, foi gerado o seguinte:
[
{
"name": "Rick and Morty",
"author": "Justin Roiland, Dan Harmon",
"year": "2013"
},
{
"name": "BoJack Horseman",
"author": "Raphael Bob-Waksberg",
"year": "2014"
},
{
"name": "Archer",
"author": "Adam Reed",
"year": "2009"
},
{
"name": "Big Mouth",
"author": "Nick Kroll, Andrew Goldberg, Mark Levin, Jennifer Flackett",
"year": "2017"
},
{
"name": "The Simpsons",
"author": "Matt Groening",
"year": "1989"
},
{
"name": "South Park",
"author": "Trey Parker, Matt Stone",
"year": "1997"
},
{
"name": "Family Guy",
"author": "Seth MacFarlane",
"year": "1999"
},
{
"name": "F is for Family",
"author": "Bill Burr, Michael Price",
"year": "2015"
},
{
"name": "BoJack Horseman",
"author": "Raphael Bob-Waksberg",
"year": "2014"
}
]
👉 Se você não tem uma ideia clara da informação a ser gerada, na parte inferior você pode encontrar muitos exemplos variados para usar imediatamente.
💡Sem login, você terá apenas duas oportunidades para criar uma API. É possível fazer login com GitHub, conta Google ou uma conta que você pode criar no momento. Na nova interface, você pode criar um endpoint completo, mas esta é uma versão paga.
📌Hoppscoth
Logo do Hoppscoth.
Uma ferramenta conhecida pelos desenvolvedores é o Postman. Desta vez, não a mencionarei, pois a considero muito conhecida. Por outro lado, Hoppscoth é um software para testar APIs que conta com uma interface minimalista e com funcionalidades úteis para o uso diário. É acessível através da web, com opção de download como extensão no Chrome ou Firefox. Você pode encontrá-la em sua página oficial, também na versão desktop, suportando Windows, Linux e Mac, além de contar com seu CLI, se preferir.
No Hoppscoth, você pode trabalhar com API Rest, GraphQL, WebSockets, Enchufe.IO, protocolo MQTT y ESS. Tem a opção de login para salvar as requisições realizadas, coleções criadas, etc. Se quiser fazer parte da comunidade, há Discord, GitHub y X activos. Ou, se estiver interessado em contribuir com alguma nova característica ou editar algo, a documentação oficial contém um guia completo de como fazer essas contribuições.
![](https://community.revelo.com.br/content/images/2024/07/CTA_Blog_Revelo--2--5.png)
Conclusão
A familiaridade com essas ferramentas é essencial para nos mantermos atualizados e cumprir com os padrões da indústria, enquanto melhoramos a experiência tanto para o desenvolvedor quanto para o usuário final.
Em poucas palavras, poderia dizer que:
- Mermaid.js é uma biblioteca de JavaScript que ajuda a criar facilmente diagramas e gráficos a partir de texto simples, facilitando a visualização de dados complicados.
- JSON Crack é uma ferramenta que detecta e soluciona problemas em arquivos JSON danificados, tornando mais fácil trabalhar com dados estruturados.
- JSON Data AI é uma ferramenta que usa inteligência artificial para entender e processar dados em formato JSON, oferecendo conselhos úteis para otimizá-los.
- Hoppscotch é uma plataforma para testar e documentar serviços web de forma colaborativa, agilizando o desenvolvimento de aplicações que os utilizam.
Espero que você se anime a usar essas ferramentas em seus próximos projetos. Nunca deixe de praticar todos os conhecimentos para ser cada vez melhor 💻.
Até a próxima! 🚀
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.