Pular para o conteúdo principal

7 postagens marcadas com "Desenvolvimento"

Ver todas os Marcadores

· Leitura de 11 minutos
Anderson Marlon

Nestjs.com

Minha maior dificuldade com NestJS era realmente entender Módulos, Controladores e Serviços, mas talvez o motivo disso seja não ter tido contato anterior com linguagens "mais pesadas" como Java ou frameworks como Angular que constantemente lidam com esse tipo de cenário.

Então, vou fazer uma espécie de Zettelkasten ou até mesmo - de leigo para leigo - e anotar tudo que eu tenho de dificuldade, cenários, analogias e tudo que é necessário para aprendermos juntos como o que é o NestJS e como ele funciona, já aviso que isso pode ficar grande esse tipo de conteúdo, então recomendo você utilizar o menu da direita para se orientar em tópicos e assuntos que sejam pertinentes a você ou ao assunto que esteja procurando. Bom, vamos lá!

O que é o NestJS?

NestJS é um framework para construção de aplicativos web em Node.js, que utiliza conceitos e padrões familiares aos desenvolvedores que já trabalham com Angular. Ele foi projetado para ser escalável, modular e fácil de manter. O NestJS utiliza TypeScript como sua linguagem principal, o que permite aos desenvolvedores aproveitar recursos avançados de tipagem estática e compilação para JavaScript.

Dúvida: Injeção de Dependência tem a ver?

Resumidamente, quando você injeta uma dependência, você tá fornecendo tudo que é externo e que uma classe precisa pra funcionar. Se você simplesmente importa de uma classe pra outra você acaba criando um acoplamento, porque a classe que recebe o import está diretamente ligada a que fornece.

Então sim, tem a ver, já que o NestJS usa classes.

Entendendo o que é Modules, Providers, Controllers e Services no NestJS

Modules (Módulos)

Seguindo a documentação do NextJS:

Um módulo é uma classe anotada com um decorador @Module(). O decorador @Module() fornece metadados que o Nest usa para organizar a estrutura da aplicação.

Cada aplicação tem pelo menos um módulo, um módulo raiz. O módulo raiz é o ponto de partida que o Nest usa para construir o grafo da aplicação - a estrutura interna de dados que o Nest usa para resolver relacionamentos e dependências de módulos e provedores. Embora teoricamente pequenas aplicações possam ter apenas o módulo raiz, esse não é o caso típico. Queremos enfatizar que os módulos são altamente recomendados como uma maneira eficaz de organizar seus componentes. Assim, para a maioria das aplicações, a arquitetura resultante empregará múltiplos módulos, cada um encapsulando um conjunto de capacidades intimamente relacionadas.

Entendeu? Senão, nem eu.

Mas vamos dissecar isso. Um módulo é uma classe que usa um decorador chamado @Module(), ou seja, ela é identificada por essa nomenclatura. Um módulo é obrigado a ter um módulo raiz que é o principal, talvez aquele vinculado ao aplicativo em si, ou seja, a base da árvore tem de vir de um módulo e depois a gente vai separando eles ou até mesmo criando galhos separados para a mesma aplicação. Sendo assim, eles são responsáveis e altamente recomendados, como citado acima por ser uma maneira eficaz de organizar os componentes.

import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';

@Module({
controllers: [CatsController],
providers: [CatsService],
})
export class CatsModule {}

Aqui, podemos ver que o modulo é responsável pela importação dos controladores (controllers) e do provedores (providers), mas vamos usar a nomenclatura em português para facilitar, estamos aprendendo, não é mesmo?

Sabe-se que no controllers por exemplo, ele é um array: controllers: [CatsController],, podendo colocar mais de um controlador dentro do módulo e assim, se repetindo para os demais.

Mas vamos a minha opinião e experiência. Sabemos que podemos importar mais de vinte, se necessário, então, temos que ter consciência e bom senso de limitar isso a cinco e utilizar outros módulos para fazer outras importações, caso ao contrário, será a mesma coisa que no React, veremos uns trinta useState para criar coisas simples que até mesmo o Javascript puro poderia fazer.

Então atente-se a criação e importação de controladores para dentro dos módulos, se for o caso, crie ramificações, crie outro módulo, importe ele e importe os controladores para dentro dele identificando o cenário mais correto daquela situação, como Users Module, Orders Module e Chat Module (como o caso da imagem acima).

Para criarmos um módulo usando CLI, nós podemos usar o seguinte comando:

nest g module cats

Providers (Provedores)

Segundo a documentação, novamente, já que é importante seguir ela e segundo a própria comunidade, a documentação do NestJS é uma das mais bem feitas da atualidade.

Os Provedores são um conceito fundamental no Nest. Muitas das classes básicas do Nest podem ser tratadas como provedores - serviços, repositórios, fábricas, ajudantes, e assim por diante. A ideia principal de um provedor é que ele pode ser injetado como uma dependência; isso significa que os objetos podem criar várias relações entre si, e a função de "conectar" esses objetos pode ser amplamente delegada ao sistema de tempo de execução do Nest.

Entendeu o cenário? Eu acredito que ficou mais complexo do que a explicação dos módulos, mas vamos lá. De volta a dissecar.

Provedores é um conceito inicialmente, então ele é apenas uma ideia, mas ideia de que? De que classes básicas, são chamadas de provedores, como serviços, repositórios e outros exemplos de cenário, como eu traduzi ao pé da letra, fábricas e ajudantes são na verdade factories e helpers, pode ser que você tenha noção do uso desse cenário melhor do que eu.

A ideia dele é que ele pode ser injetado como uma dependência, lembra que mencionei mais acima? O que quer dizer que objetos podem ter relações entre si - lá ele - e podem se conectar e comunicar-se entre si, é uma espécie de pássaro passando informações entre as árvores (módulos).

Então o CatsService (service) mencionado dentro do provedores no código dos módulos, está correto? Sim. Services é um provider.

Ficou confuso? Se sim, entenda que no código, na hora que estamos importando CatsService para dentro de providers, estamos dizendo para nosso provedor que esse serviço (CatsService) irá prover uma funcionalidade, entendeu? Então, ele não é um modulo, ele é provedor, o motivo? Ele é um serviço. Por isso, é fundamental a nomenclatura, separar os nomes como DogService, BirdService, ou CatHelpers para entender que todos eles fazem parte de um provedor, é uma prática útil para organizar o código e evitar confusões.

O que é Serviços (Services) e quando usar?

Já sabemos que Services é uma coletânea de provedores, se ele tem alguma funcionalidade, ele é importado dentro do provedor, mas BirdService é um provedor? Sim. Ele é um service? Sim. Ele é um Helper? Não, já que não usamos essa nomenclatura e isso pode atrapalhar seu entendimento do código.

No NestJS, os serviços são classes que são importadas dentro do provedor, como mencionado, e eles possuem a lógica de negócios da aplicação. Eles são responsáveis por executar tarefas específicas, como acessar bancos de dados, realizar operações de leitura e gravação, executar cálculos complexos e interagir com outros serviços ou componentes da aplicação, vamos interpretar eles sendo como funções no Javascript, responsáveis por fazer a questão funcionar.

Acredito que no caso das importações, lembra que eu falei que o ideal é chamarmos cinco módulos e depois separarmos, se for o caso? Acredito que não tenha problema ter vinte importações, desde que ele não seja no módulo raiz, e sim, no módulo que ele é responsável, vamos usar o caso da calculadora, certo? Quantos services ele pode ter?

Posso criar um para adição, outro para subtração, outro para multiplicação e assim por diante e não tem problema. O problema maior é você colocar todas essas importações dentro do módulo raiz, sendo que estamos criando um celular, imagina a bagunça que seria, então o ideal, é criarmos um módulo chamado calculatorModule() e importar lá dentro esses services.

Outro exemplo é, em uma aplicação de lista de tarefas, você pode ter um serviço de TaskService que contém métodos para criar, atualizar, recuperar e excluir tarefas do banco de dados. Esse serviço pode ser importado (injetado) em um controlador de tarefas para lidar com as solicitações HTTP relacionadas às tarefas.

Para criar um serviço, via CLI, você pode utilizar o seguinte comando:

nest g service cats

Controllers (Controladores)

E vamos ver na documentação.

O objetivo de um controlador é receber solicitações específicas para a aplicação. O mecanismo de roteamento controla qual controlador recebe quais solicitações. Frequentemente, cada controlador tem mais de uma rota, e diferentes rotas podem realizar diferentes ações. Para criar um controlador básico, usamos classes e decoradores. Os decoradores associam classes com metadados necessários e permitem que o Nest crie um mapa de roteamento (vinculando solicitações aos controladores correspondentes).

Vamos simplificar isso. Qual é a funcionalidade de um controlador? Receber solicitações especificas para a aplicação, então podemos definir que ele pode receber uma funcionalidade para deletar, adicionar ou editar uma funcionalidade dentro da aplicação. Como eles podem ter mais de uma rota, então fica claro que podemos definir um task/delete ou task/create como rotar para fazer determinadas operações, como no caso de deletar e criar.

Para criar um controlador básico, utilizamos classes, assim como nos serviços e decoradores (decorators), os decoradores nesse caso do controlador é o @Controller('cats'), ele é que é o responsável por criar a rota que a aplicação ou usuário irá acessar para conseguir determinada coisa, vamos ver no código abaixo por exemplo:

import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
@Get()
findAll(): string {
return 'This action returns all cats';
}
}

Explicando o código acima, nós pegamos o @Controller, definimos que a rota que iremos usar (método de roteamento) será cats, então quando acessar localhost:3000/cats, por exemplo, seremos jogados para esse lugar. Definimos que ele é uma classe, como a nomenclatura já diz e que ele tem um @Get().

Mas o que isso significa? É que pelo método HTTP, essa rota ela terá o método GET, então fica fácil definir o que ela irá fazer, no caso, iremos devolver uma informação e dentro ainda, temos uma função chamada findAll() que é do tipo string, que irá retornar 'This action returns all cats'.

Complicado? Acho que não.

Para criar um controller usando CLI, usamos o seguinte comando:

nest g controller name

Entendendo o cenário

Ficou claro como usamos cada funcionalidade para aprendermos a usar o Nest? Claro, ele é um framework back-end de Javascript, então ele é meio que um compilado de funcionalidades em cima do Express. Então temos várias funções semi-prontas, que irão facilitar nossa vida para criar uma aplicação.

Usamos um módulo para definir categorias, como o caso de tarefas ou uma calculadora, levando em conta que são aplicações simples, usamos um controlador para dizer o que acontece quando acessar aquela rota em especifica, seja para deletar um cálculo ou armazenar ele, e usamos o serviço para fazer a funcionalidade funcionar, como fazer um cálculo, por exemplo.

Entendemos que o cenário para a criação desse tipo de aplicação varia muito, acabo que recomendando em utilizar em médias-altas aplicações. O que significa? Não há necessidade de utilizar um NestJS para usar métodos HTTP para criar uma calculadora por exemplo ou fazer um uso de uma simples API, mas existem vários cenários adequados como criar um dashboard financeiro, criar um site de notícias e deixar bem mais completo e esse tipo de cenário.

Considerações Finais

A documentação dele é bem explicada, como podemos ver, eu consegui entender bem mais o que de fato é o NestJS do que seguindo cursos ou vídeos no Youtube, eu simplesmente parei para ler a documentação e usei desse artigo para explicar o que eu aprendi para outra pessoa sobre o que foi passado. Entender todo o cenário, ler com calma, ver a funcionalidade daquele código pouco a pouco e tentar se auto explicar, é uma das maneiras mais simples de se aprender e absorver conhecimento, então não se assuste.

Espero de fato ter conseguido explicar todo o cenário básico do NestJS, espero que você possa pegar projetos e ideias no Youtube para clonar ou utilizar a seu favor para fixar ainda mais essas ideias de como ele funciona, e claro, entender quando utilizá-lo, já que ele é basicamente um carro bem veloz na mão de quem usa e você não vai usar ele para ir na padaria e buscar pão.

Espero ter ajudado, pois a construção desse artigo em si, já foi de grande ajuda até mesmo para mim em entender esse cenário e aplicação e bom, qualquer dúvida ou sugestão, você pode me chamar lá no Twitter ou na Comunidade no WhatsApp.

Obrigado por ter lido até aqui e até a próxima!

· Leitura de 5 minutos
Anderson Marlon

James Harrison

A programação é uma habilidade valiosa e altamente procurada nos dias de hoje. Se você está interessado em ingressar nesse emocionante mundo da tecnologia, é natural se perguntar por onde começar. Este artigo explora as diferentes trilhas da programação, especificamente front-end, back-end e desenvolvimento mobile, destacando as vantagens e desvantagens de cada uma. Além disso, discutiremos a decisão entre se tornar um especialista ou generalista em programação.

Primeiros Passos na Programação

Antes de escolher um caminho específico, é fundamental aprender os conceitos básicos da programação. Isso envolve compreender a lógica de programação, aprender uma ou mais linguagens de programação, entender estruturas de dados e algoritmos. Felizmente, existem muitos recursos online, cursos e tutoriais disponíveis para ajudar você a dar os primeiros passos. Inclusive existe o roadmap para seguir um passo a passo mais funcional de uma determinada área em específico.

Front-End: O Que o Usuário Vê

O que é Front-End?

O desenvolvimento front-end envolve a criação da interface com a qual os usuários interagem diretamente. Isso inclui tudo, desde o layout de um site até a forma como os botões funcionam. As tecnologias front-end mais comuns incluem HTML, CSS e JavaScript.

Vantagens do Front-End:

  • Visibilidade Imediata: Trabalhar no front-end permite que você veja instantaneamente o resultado do seu trabalho, pois lida com o que os usuários veem.
  • Criatividade: É uma ótima escolha para pessoas com habilidades criativas, pois envolve design e experiência do usuário.

Desvantagens do Front-End:

  • Rápida Evolução: As tecnologias front-end mudam rapidamente, exigindo constante aprendizado.
  • Limitação de Complexidade: Em projetos complexos, o front-end pode ter suas limitações em termos de processamento e armazenamento de dados.

Back-End: O Cérebro Por Trás das Operações

O que é Back-End?

O desenvolvimento back-end está relacionado ao funcionamento dos bastidores de um site ou aplicativo. Isso inclui servidores, bancos de dados e a lógica que permite que um sistema funcione.

Vantagens do Back-End:

  • Demanda Constante: Back-end é necessário para qualquer aplicativo ou site, tornando os desenvolvedores back-end altamente procurados.
  • Lógica Complexa: É uma escolha excelente para quem gosta de resolver problemas complexos e lógicos.

Desvantagens do Back-End:

  • Menos Visível: O trabalho no back-end é menos visível para os usuários finais, o que pode ser menos gratificante para alguns.
  • Requer Conhecimento Técnico Avançado: Requer uma compreensão profunda de servidores, segurança e bancos de dados.

Desenvolvimento Mobile: Mundos na Palma da Mão

O que é Desenvolvimento Mobile?

O desenvolvimento mobile envolve a criação de aplicativos para dispositivos móveis, como smartphones e tablets. Você pode escolher entre desenvolvimento iOS (Apple) ou Android (Google).

Vantagens do Desenvolvimento Mobile:

  • Ampla Demanda: Com o aumento constante no uso de dispositivos móveis, a demanda por desenvolvedores mobile é alta.
  • Acessibilidade: Seus aplicativos podem chegar a uma ampla audiência, tornando-o acessível a muitas pessoas.

Desvantagens do Desenvolvimento Mobile:

  • Plataformas Diferentes: Se você deseja criar aplicativos para ambas as principais plataformas, iOS e Android, precisa aprender duas linguagens de programação diferentes.
  • Atenção aos Detalhes: Pequenos erros podem levar a problemas significativos em aplicativos móveis, tornando-o um campo que exige atenção minuciosa.

Especialização Vs. Generalização

A decisão de se tornar um especialista em uma área específica ou um generalista que abrange várias áreas é importante. A especialização envolve aprofundar seus conhecimentos em um campo específico, tornando-se um especialista. Por exemplo, você pode se tornar um especialista em segurança cibernética, inteligência artificial ou desenvolvimento front-end.

Por outro lado, a generalização significa que você tem conhecimentos básicos em várias áreas e pode trabalhar em várias partes de um projeto. Isso pode ser benéfico em equipes menores ou ao iniciar sua própria empresa.

Eu falei sobre isso anteriormente em Front-end, Back-end, Fullstack, o que é e para onde ir? e particularmente prefiro que escolha ser especialista ao invés de generalista, isso te deixa mais destacado naquele seguimento do que qualquer outra pessoa genérica que sabe apenas o básico.

Conclusão

A escolha de aprender programação é um passo importante para entrar no mundo da tecnologia. Comece pelos conceitos básicos e, em seguida, explore as diferentes trilhas, como front-end, back-end e desenvolvimento mobile. Considere suas preferências pessoais, metas de carreira e demanda do mercado ao tomar sua decisão. E lembre-se, a programação é uma habilidade em constante evolução, então esteja preparado para aprender continuamente, independentemente do caminho que escolher.

Se ainda estiver com dúvidas sobre o que foi esclarecido aqui, você pode ver esse artigo - Front-end, Back-end, Fullstack, o que é e para onde ir? - novamente citando ele - que eu criei, usando analogias para explicar qual é a função de cada área. E bom, qualquer dúvida estou no Twitter/X, caso queira me procurar e tirar as devidas dúvidas.

Estamos também no [Whatsapp][https://chat.whatsapp.com/KOgletvhYCvFIpuo9SNgGJ] com o nosso grupo de Baby Developers, para as pessoas que almejam se tornar programadores de qualidade e querem uma dica, um auxílio e um guia, não só meu, mas de uma enorme comunidade para ir seguindo o caminho das pedras e evoluindo com mais facilidade.

· Leitura de 5 minutos
Anderson Marlon

Cesar Carlevarino Aragon

Hoje fiquei desacreditado, é 11 de Setembro de 2023 e recebi a notícia de que dia 08 de Setembro a versão 1.0 do Bun saiu, só não soube disso, porque aqui no Brasil foi pós-feriado e muita gente acabou emendando - inclusive eu. Mas vamos lá, o que é o Bun e porquê ele vai revolucionar tanto em questão de velocidade de compiladores.

Você é júnior e não sabe o que é um compilador ou até mesmo passou despercebido durante os estudos, vamos lá que vou te explicar tudo direitinho.

Você pode ver a notícia sobre o lançamento do Bun lá no Onigiri Hardcore.

O que são os compiladores?

Compiladores são programas de computador que convertem código-fonte escrito em uma linguagem de programação em código-objeto escrito em uma linguagem de máquina ou seja, um exemplo para quem está familiarizado com Javascript, o Node é um compilador Javascript. Então, ele irá pegar seu código escrito em Javascript e simplesmente ler tudo aquilo e compilar, claro que para cada linguagem temos um compilador diferente, mas a questão aqui é vermos sobre o Bun e sua incrível velocidade referente aos demais no mundo do Javascript. Além de tudo, os compiladores são usados para aumentar a velocidade e a eficiência de execução de programas. Eles também podem ajudar a detectar e corrigir erros de código.

O que é o Nodejs?

Node.js é um runtime (compilador) JavaScript de código aberto que pode ser usado para executar código JavaScript fora do navegador. Ele é baseado no motor JavaScript V8 do Google Chrome. O Node.js é frequentemente usado para construir aplicações web, mas também pode ser usado para construir aplicações de desktop, aplicações móveis e aplicações de servidor.

O que é o Deno?

Deno, concorrente direto do Node - aí que surge o trocadilho do nome - é um runtime JavaScript e TypeScript moderno que é seguro por design. Ele é baseado no motor JavaScript V8 do Google Chrome, mas usa um mecanismo de segurança baseado em sandbox para proteger os aplicativos executados nele. O Deno é frequentemente usado para construir aplicações web seguras, mas também pode ser usado para construir aplicações de desktop, aplicações móveis e aplicações de servidor.

E afinal, o que é o Bun?

Bun é um runtime JavaScript e TypeScript moderno que é rápido e eficiente. Ele é baseado no motor JavaScript V8 do Google Chrome, mas usa um mecanismo de compilação para melhorar o desempenho. O Bun é frequentemente usado para construir aplicações web rápidas e eficientes, mas também pode ser usado para construir aplicações de desktop, aplicações móveis e aplicações de servidor.

O resultado dos testes

Fiz um teste simples, usando o mesmo arquivo para os três compiladores e o resultado foi surreal. Nesse teste, usei uma matemática simples, usando dez casas decimais e segui essa fórmula para que ele pudesse trazer de resultado: ((a + b) * (c + d)) / (e + f) + g - h;

Claro que para as máquinas isso é mamão com açúcar, mas para nós, levaria mais do que um tempinho para solucionarmos isso, certo? Mas vamos lá.

Pedi para ele me falar quanto tempo ele levou para executar, qual é o tempo em que ele terminou aquilo - sem parar o relógio - e quanto tempo (abstração) ele levou para fazer isso nesse intervalo ou seja: TdE - TdF = TdR (Tempo de Execução menos o Tempo de Finalização receberemos o Tempo de Resultado).

O resultado do Node foi que ele começou em 17.3797 milisegundos, terminou o teste em 17.3852 milisegundos e o tempo que levou para resolver tudo isso foi de 0.0058 milisegundos. É um resultado bastante significativo.

Já o Deno (irmão do meio) começou em 22 milisegundos, terminou em 22 milisegundos e o valor foi menor do que 0.0 milisegundos para retornar o resultado, como ele foi bem chato para nos trazer o valor completo, só tivemos esse valor por cima.

E então que surge o irmão mais novo, o Flesha da família. O Bun, levou 10.888466 milisegundos para começar, 10.888736 milisegundos para finalizar e levou cerca de apenas 0.0002 milisegundos para resolver a matemática.

Test Results

Avaliação

Sim! Esse valor é muito, mas muito rápido do que os dois comparados. Em questão de velocidade, o Bun é o primeiro, seguido pelo Node e pelo Deno. O mais incrível de tudo isso é que o Bun está na versão 1.0.0, enquanto o Node está na versão 18.17.1 e o Deno na v.1.36.4.

Eu fiquei alucinado quando vi isso. Claro que, em termos de velocidade, os três runtimes são muito rápidos. Mesmo o mais demorado, o Deno, gastou apenas 22 milissegundos para responder. Mas ver que o Bun é capaz de fazer isso em 10 milissegundos é simplesmente incrível.

Claro que fizemos um teste simples, mas ele é suficiente para mostrar que o Bun é muito mais rápido que qualquer outro compilador. Em grande escala, como nos vários projetos que carregamos no Node, a diferença é ainda mais significativa. Um projeto que leva cerca de 10, 15 segundos para ser executado no Node pode ser executado em apenas 1 segundo no Bun.

Em termos técnicos, avaliando os resultados dos testes e os recursos de cada runtime, pode-se concluir que o Bun é a melhor opção para aplicações web que exigem alta performance e eficiência, o Node.js é uma boa opção para aplicações web que não exigem alta performance e o Deno é uma boa opção para aplicações web seguras.

Agora por trás das cortinas, eu não digo nada se eu mudar meus projetos para o Bun. A versão estável dele foi lançada ao público e é garantida como segura para uso em produção.

E você? Vai mudar de compilador também ou vai esperar um pouco? Comenta comigo lá no Twitter!

· Leitura de 7 minutos
Anderson Marlon

Neste artigo abordaremos um assunto bastante interessante no React chamado context, que disponibiliza uma maneira de passar os dados entre a árvore de componentes sem precisar passar props manualmente em cada nível.

Imagine o seguinte cenário, você tem o nome de um usuário em um componente, só pra gente ter uma noção entre camadas, vamos chamá-los de A, B, C e D. Imagine que esse componente fez uma chamada de API no C, certo? Nós temos apenas o nome do usuário lá e não queremos ter que ficar repetindo essa chamada nos outros componentes, certo?

Ah, mas por que não? Ou por que não criamos no topo e vamos chamando até embaixo?

Vamos ao primeiro cenário. Imagine que ao invés de você fazer uma requisição pela página, você faz quatro para apenas uma página, certo? Isso é tranquilo quando se trata de um usuário, mas já pensou se a nossa aplicação tem mil acessos diários? Isso seria basicamente quatro mil requisições diária e isso é muita coisa para o banco de dados, isso sem contar as atualizações de página.

E por que não criamos a aplicação no topo e vamos chamando nas demais? Por um motivo quase que semelhante. Não tem necessidade de você chamar nas camadas A, B e D, se o usuário sequer passou por lá, imagine que você só entrou na primeira página e saiu, certo? E quando você vai ver, sem querer, você fez uma requisição na sub página que se quer o usuário entrou, é bem desgastante isso, não concorda? Ainda mais para quem vive de internet móveis.

Voltando ao Foco

Para facilitar essa comunicação, seja de A para D e D para B, por exemplo, existe o Context API do React e aí que entramos no assunto. useContext, como funciona, de onde ele vem e como ele se alimenta. Em resumo, com o Context API podemos transitar esses dados através de componentes sem que ele sejam filhos diretos desse componente.

E vamos com calma entendendo passo a passo dessa situação, porque até para mim foi muito complexo entender no começo.

Primeiro Passo

Primeiro, vamos importar e executar o método createContext

import { createContext } from 'react'

const MyContext = createContext(null)

Inicialmente definimos ele como null, já que queremos ele vazio e não queremos definir um tipo para ele ainda.

DICA: O retorno do createContext é um componente, por isso é legal salvar numa variável em PascalCase, as famosas { }

Segundo Passo

Já que criamos ele vazio, como iremos adicionar dados a esse novo contexto que criamos?

Dentro do Provider definimos que esse contexto fornecerá pros componentes descendentes, deixando isso na propriedade value.

const MyContext = createContext(null)

export default function Parent() {
const nameUser = {
name: 'Yagasaki',
}

// Outro exemplo
const nameUser = ['Yagasaki']

// Mais um exemplo
const nameUser = 'Yagasaki'

return (
<MyContext.Provider value={nameUser}>
<ComponentA />
<MyContext.Provider>
)
}

Está permitido colocar qualquer tipo de dado dentro contexto, já que ele aceita qualquer tipo, isso inclui até mesmo funções.

Terceiro Passo

Agora que sabemos como criar um contexto, como adicionar dados a ele, como faremos para usar esse contexto como a gente bem entender?

Infelizmente não iremos usar esses dados fora do famoso pai-filho, ou seja, não adianta um componente "dinossauro" tentar acessar informações do componente "peixe" já que eles não possuem nenhum parentes, é diferente do famoso "dinossauro" para "galinha", deu para entender a analogia? Componentes que estão fora da árvore deles não possuem acesso, simples.

Mas como vamos acessar esses dados?

Primeiramente precisamos importa uma ou duas coisas, sendo: O Hook useContext do React e o Hook que a gente criou em outro arquivo. Abaixo está um exemplo de como iremos usar o useContext a nosso favor.

import { useContext } from 'react'

import MyContext from './MyContext.js'

export default function ComponentC() {
const userContext = useContext(MyContext)

return (
<div>
<p>{userContext.name}</p>
</div>
)
}

O seu retorno será exatamente a mesma informação que inserimos ali em cima na propriedade value. Assim podemos obter o dado diretamente do provider sem NENHUM componente intermediário! Economizando um esforço que seria praticamente enorme para transitar esse dado abaixo por todos os componentes intermédios! Simplesmente DEMAIS!

DICA: Note que obtemos o valor do nome como uma propriedade de userContext, isso porque no exemplo, criamos como um objeto na propriedade value, e esse mesmo objeto foi retornado da execução do useContext. Se for outro tipo de dado, o retorno será correspondente!

Modificando o valor

Beleza, já criamos o provider, que vem do inglês de provedor, aquele que provê algo, providencia. Conseguimos inserir algo nele e acessamos ele através de um componente distante, e agora? Agora vamos aprender a modificar esse valor, manipular essa informação. Lembra que eu mencionei acima que ele aceita QUALQUER tipo de dado, inclusive funções? Então, e se por exemplo a gente usasse um useState nele?

Você deve se perguntar porque iriamos querer fazer isso, certo? Imagine que você está numa página de edição de usuário e quer que os dados desse usuário já estejam preenchidos quando o usuário entrar na página, como que a gente faz?

A ideia é o seguinte, vamos isolar a variável que a gente está passando para a propriedade value para facilitar a leitura e deixar um pouco mais organizado, okay? Nada de muito novo que fizemos aqui, é claro que estamos levando em consideração que ele é um objeto. Iremos apenas adicionar o valor do state e seu dispatch na variável providerValue e assim, inserimos no provider.

const MyContext = createContext(null)

export default function Parent() {
const [name, setName] = useState('Yagasaki')
const providerValue = {
name,
setName,
}

return (
<MyContext.Provider value={providerValue}>
<ComponentA />
</MyContext.Provider>
)
}

Ficou confuso? O que fizemos a mais foi apenas adicionar o nome das duas variáveis que usamos no useState para assim que chamarmos de volta podermos manipular ele também dentro do componente, caso ao contrário, só precisariamos enviar o name e ele ficaria somente leitura, tendo que ser alterado apenas na página Parent

Dessa forma podemos alterar o valor da variável name a partir de qualquer componente que quisermos, como eu mencionei anteriormente, isso acaba sendo bem útil quando precisamos atualizar o valor de uma variável em ambos os lados, bacana né?

Olha como ficou o componente filho quando utilizamos o useState para passar a informação:

import { useContext } from 'react'
import MyContext from './MyContext.js'

const ComponentA = () => {
const userContext = useContext(MyContext)

function handleChange(event) {
const { newName } = event.target.value;

if (true) {
// Alguma verificação, se necessário
}

userContext.setName(newName)
}

return (
<div>
<label>
Usuário: {userContext.name}
<input type="text" value={userContext.name} onChange={handleChange}/>
</label>
</div>
)
}

export default ComponentA

Só tome cuidado com loops infinitos, em casos de formulário, use o form onSubmit={(e) => e.preventDefault()}, assim, evitará de atualizar a página quando o usuário clicar em enviar, por exemplo, e claro, caso esteja usando um form.

Fico muito agradecido que você tenha chegado até aqui, levou um pouco de tempo para construir esse artigo, já que tentei deixar o mais direto e bem explicado possível para você entender de fato como funciona o Contexto, já que eu levei muito tempo para realmente entender como ele funciona.

Feedback no meu Twitter/X (@Yagasaki7K) são sempre bem vindos e espero que você que se dedicou a ler e entender esse artigo tenha aprendido algo novo.

Muito obrigado!

· Leitura de 4 minutos
Anderson Marlon

Eu vi recentemente que muitas pessoas me procuram com as mesmas perguntas, como faço para conseguir um emprego, pode me ajudar com tal projeto, porque você é desenvolvedor de Javascript, resolvi então separar essas perguntas e responder todos que me veio a mente.

Como faço para conseguir um emprego?

Você é um desenvolvedor júnior? Possuí experiência, senão, leia sobre Como conseguir experiência sendo Júnior/Iniciante.

Eu entendi, preciso de experiência, mas acredito que meu Github não é bonito, pode dar uma olhada? Recomendo que você veja de como eu estive Montando um perfil interessante e exemplar no GitHub.

Se nenhuma dessas ideias de deu uma ajuda sobre o que você precisa, peça ajuda na Comunidade de Desenvolvedores da Kalify Inc.

Nenhuma pergunta é idiota.

Você pode me ajudar com XYZ?

Não, eu recebo muitos pedidos e simplesmente não tenho tempo para ajudar a todos, infelizmente, a maioria das coisas nem são problemas e a a Comunidade de Desenvolvedores da Kalify Inc poderá ajudá-lo, a menos que você tenha algo incompleto - eu tento responder cada menção que recebo no Twitter e, às vezes, dependendo do que for, responderei oferecendo assistência, mas isso é raro e depende muito de qual é o problema ou a informação que está sendo encaminhada para mim. Recomendo tentar entrar em contato comigo usando a comunidade.

Por que você não usa outra linguagem além do Javascript?

Javascript é meu espaço seguro para mim, estou muito confortável com ele e posso escrever quase tudo que não envolva nada de especial sem ter que verificar nenhuma documentação mais complicada.

Eu poderia usar PHP, Python ou qualquer outra coisa que possa existir e eu realmente uso esses idiomas às vezes - quase que raramente, mas acabo pesquisando cada passo simples no Google porque simplesmente não sei o que estou fazendo, é como se você estivesse me pedindo para escrever isso em chinês.

Em conclusão, Javascript é minha escolha porque sou rápido e posso fazer as coisas com relativa rapidez, sem complicações, além de ter sido a minha primeira linguagem que soube usar, sem achar que estava usando muito código para fazer algo simples.

Você trabalha com o que?

Sou Desenvolvedor de Software e especialista em Front-end. Fora do âmbito tecnológico, sou colunista no Onigiri Hardcore e atleta de Taekwondo na Campinas Fighters.

Como faço para ajudar no open source?

Temos a Kalify Inc, com projetos abertos ao público que você pode ajudar a contribuir, além de ter a Comunidade de Desenvolvedores da Kalify Inc que você pode entrar e conversar com outros desenvolvedores. Para ajudar a comunidade da Kalify Inc e seus projetos, leia sobre o Plano de Carreira da Kalify Inc.

Qual origem do nome Yagasaki?

Antes de tudo, não sou asiático, gosto da cultura japonesa e consumo bastante conteúdo a respeito. Para saber mais, você pode ler um pouco sobre isso em Primeiramente deixe-me apresentar, eu sou Anderson

Qual é a configuração do seu computador?

Meu computador é um B550M Aorus Elite, Ryzen 5 5600 de 3.50GHz, 32GB de RAM, 1TB de SSD, 500GB de HD e 256GB (OS) de SSD com uma NVIDIA GeForce RTX 4060 de 8GB, tenho um teclado da Redragon Lakshmi, Mouse Pulsefire Surge da HyperX, Headset Fifine Ampligame H6 e Microfone Fifine Ampligame A2, além de dois monitores da LG de 75Hz com 21.5' (22MP410-B).

Você pode ver também as configurações do meu Oh-My-Zsh, do meu VSCode e do meu Windows Terminal.

Como você fez o seu site?

Meu site é feito com Docusaurus, um gerador de sites estáticos, com ReactJS e Markdown, hospedado na Vercel. Utilizando SASS como estilização. Por costume, em outros desenvolvimentos como Essentials e Onigiri Hardcore, utilizo o NextJS, Typescript e Styled Components com Firebase.

Por que seu blog é apenas em português?

Escrevo somente em português devido à minha comunidade e as pessoas que me seguem pelo conteúdo, que está em fase de aprendizado e que me acompanham em minhas postagens, dicas e conteúdo compartilhado.

Optar pelo inglês para atingir o público internacional não seria o ideal, já que que aqueles que visualizarem minhas publicações já possuem conhecimento nesse sentido. Além disso, há um suporte comunitário em inglês que supera significativamente o já disponível em português.

· Leitura de 3 minutos
Anderson Marlon

"Uma API (Application Programming Interface) é um conceito fundamental no mundo da programação e do desenvolvimento de software. Ela desempenha um papel crucial na comunicação entre diferentes sistemas, permitindo que aplicativos, serviços e plataformas interajam e compartilhem dados de maneira eficiente e padronizada. Neste artigo, exploraremos o significado de uma API, como ela funciona e como é usada na prática."

Uma API é um conjunto de regras, protocolos e ferramentas que permitem que diferentes softwares se comuniquem entre si. Ela define um conjunto de métodos e formatos de dados que especificam como solicitar e receber informações de um sistema ou serviço específico. A API atua como uma ponte, facilitando a interação e o compartilhamento de dados entre diferentes aplicativos.

Como funciona uma API?

Em termos simplificados, uma API funciona como um contrato entre o provedor e o consumidor de um serviço. O provedor disponibiliza uma série de endpoints (pontos de acesso) que o consumidor pode usar para enviar solicitações e receber respostas. Esses endpoints geralmente estão associados a ações específicas, como recuperar dados, enviar dados ou executar uma determinada operação.

A comunicação com uma API geralmente ocorre por meio de solicitações HTTP (GET, POST, PUT, DELETE), onde o consumidor faz uma solicitação para um determinado endpoint fornecendo parâmetros, se necessário. Em seguida, o provedor processa a solicitação e retorna uma resposta no formato especificado, como JSON, XML ou outros formatos comuns.

Tipos de APIs

Existem diferentes tipos de APIs que podem ser utilizadas, dependendo do objetivo e do contexto do projeto. Alguns dos tipos mais comuns incluem:

APIs de serviço da web (Web APIs): São APIs baseadas em padrões da web, como REST (Representational State Transfer) e SOAP (Simple Object Access Protocol). Elas são amplamente utilizadas para criar e consumir serviços na web, permitindo a troca de informações entre sistemas distribuídos.

APIs de biblioteca/framework: São APIs fornecidas por bibliotecas ou frameworks específicos. Elas oferecem funcionalidades e recursos predefinidos para facilitar o desenvolvimento de aplicativos dentro desses contextos. Exemplos populares incluem as APIs do Django, Flask e React.

APIs de plataforma: São APIs fornecidas por grandes plataformas, como Google, Facebook e Twitter. Elas permitem que os desenvolvedores interajam com os serviços e recursos dessas plataformas, como autenticação de usuário, publicação em redes sociais e acesso a dados específicos.

Vantagens do uso de APIs

O uso de APIs traz diversos benefícios, tanto para os provedores quanto para os consumidores de serviços. Algumas vantagens incluem:

Reutilização de código: Ao fornecer uma API, os desenvolvedores podem criar componentes e funcionalidades que podem ser reutilizados em diferentes projetos e contextos.

Integração simplificada: As APIs facilitam a integração entre diferentes sistemas e aplicativos, permitindo que eles se comuniquem e compartilhem dados de forma padronizada.

Escalabilidade e flexibilidade: As APIs permitem que os serviços sejam escaláveis e flexíveis, pois podem ser atualizados e expandidos independentemente do consumidor.

Estímulo à inovação: Ao disponibilizar APIs, as empresas e plataformas encorajam a inovação e a criação de novos aplicativos que utilizam seus serviços e recursos.

Finalizando

As APIs desempenham um papel fundamental na interconexão e comunicação entre sistemas e aplicativos. Elas permitem que diferentes softwares se comuniquem de maneira eficiente, compartilhem dados e ofereçam serviços em conjunto. Compreender o conceito de APIs e como elas funcionam é essencial para qualquer desenvolvedor ou pessoa interessada em tecnologia.

Esperamos que este artigo tenha fornecido uma visão geral clara sobre o assunto e inspire você a explorar ainda mais as possibilidades das APIs em seus projetos futuros.

· Leitura de 4 minutos
Anderson Marlon

"Este artigo aborda o tema da apresentação de projetos e os primeiros passos para utilizar o GitHub Pages como plataforma de hospedagem."

Ao desenvolver um projeto, é importante apresentá-lo de forma adequada e torná-lo acessível para outras pessoas. Para isso, é necessário contar com uma apresentação bem estruturada e uma solução de hospedagem confiável. O GitHub Pages oferece uma excelente plataforma para apresentar seus projetos ao mundo, proporcionando uma maneira simples e gratuita de hospedar sites estáticos diretamente dos repositórios do GitHub, ou seja, se seu projeto usa apenas HTML, CSS e JS, essa é uma boa prática.

Neste artigo, exploraremos o processo de utilização do GitHub Pages e os primeiros passos para criar a apresentação dos seus projetos.

O que é o GitHub Pages?

O GitHub Pages é um serviço de hospedagem de sites estáticos oferecido pelo GitHub. Ele permite que você crie um site a partir do conteúdo dos seus repositórios do GitHub, tornando-os acessíveis através de um URL personalizado, e a cada commit que subir, ele irá atualizar automaticamente. Isso significa que você pode compartilhar seus projetos com outras pessoas, fornecer documentação, exibir portfólios e muito mais, tudo de forma simples e gratuita.

Primeiros Passos com o GitHub Pages

Para começar a utilizar o GitHub Pages, siga estes passos:

Crie um repositório no GitHub

Se você ainda não possui um repositório para o seu projeto, crie um no GitHub. Certifique-se de que seu repositório contenha os arquivos HTML, CSS e JavaScript necessários para o seu site estático.

Ative o GitHub Pages para o seu repositório

Antes de qualquer commit, acesse as configurações do seu repositório no GitHub e role a página até encontrar a seção "GitHub Pages". Nessa seção, selecione a branch que contém o código do seu site estático e clique em "Save" (Salvar). O GitHub Pages irá utilizar essa branch para gerar o site.

Escolha um tema (opcional)

O GitHub Pages oferece uma variedade de temas para personalizar a aparência do seu site. Selecione um tema que melhor se adeque ao seu projeto ou opte por não utilizar um tema e criar seu próprio design personalizado.

Acesse o seu site

Após ativar o GitHub Pages e escolher um tema (ou criar um design personalizado, como seu próprio código), você poderá acessar o seu site através do URL fornecido. O GitHub Pages geralmente segue o seguinte formato de URL: https://seunomeusuario.github.io/nomerepositorio.

Personalize o seu site

Agora que o seu site está ativo, você pode começar a personalizá-lo de acordo com as necessidades do seu projeto. Edite os arquivos HTML, CSS e JavaScript do seu repositório para adicionar conteúdo, fazer ajustes de layout e implementar funcionalidades específicas, cada commit, o Github Pages automaticamente irá atualizar a nova versão na URL que mencionamos acima.

Bônus

Além dos passos básicos mencionados acima, o GitHub Pages oferece recursos adicionais para melhorar a apresentação dos seus projetos. Alguns desses recursos incluem:

  • Registro de domínio personalizado: É possível registrar um domínio personalizado para o seu site no GitHub Pages, tornando-o ainda mais profissional.
  • Uso de subdomínios: Caso você possua um domínio personalizado, é possível configurar subdomínios para diferentes projetos hospedados no GitHub Pages.
  • Integração com Jekyll: O GitHub Pages possui integração nativa com o Jekyll, uma ferramenta de criação de sites estáticos, permitindo a utilização de recursos avançados, como geração automática de páginas, layouts personalizados e muito mais.

Finalizando

O GitHub Pages é uma excelente opção para apresentar seus projetos de forma profissional e acessível. Com os primeiros passos descritos neste artigo, você estará pronto para criar e compartilhar seus sites estáticos de maneira fácil e gratuita. Aproveite os recursos oferecidos pelo GitHub Pages para personalizar seu site e tornar a experiência dos usuários ainda mais agradável.

Não esqueça de adicionar a URL do seu projeto em todos os repositórios, se você for iniciante, é uma boa prática para que outras pessoas vejam como anda seu desenvolvimento e como você está evoluindo.

Agora é hora de mostrar ao mundo o seu talento e compartilhar seus projetos com a comunidade!