DEV Community: Robson Neres

Como entrar no mundo da tecnologia?

Robson Neres — Mon, 17 Jan 2022 13:05:58 +0000

O mundo vive um momento único na história, onde qualquer pessoa com um celular consegue gerar conteúdo e ganhar muito dinheiro, e com isso a tecnologia continua muito importante. O mercado de T.I nunca viveu um momento tão quente assim, onde se você se dedicar e ter uma pequena estrutura consegue ter um emprego em 6 meses e com uma faixa salarial de entrada de 3 mil reais. Parece loucura né…e há uns 10 anos atrás isso era loucura, mas hoje é factível e você pode beber dessa água também.

Mas o que devo estudar e onde para beber dessa água? Como entro de fato no mundo da tecnologia?

Essas respostas são simples, mas não quer dizer que fazer isso será, você vai precisar de muita dedicação e paciência mas em pouco tempo vai conseguir ver evoluções factíveis se tiver esses dois pontos que falei.

Para começar temos muitas áreas da tecnologia, mas hoje em dia as que mais têm tido procura são programação e tráfego pago, calma não precisam ter medo e nem dizer que:

"Sou ruim em matemática e não vou conseguir aprender"

Não precisa de matemática de fato para aprender qualquer uma das área que comentei.

A programação tem muitas tecnologias envolvidas, e uma delas vai te encher os olhos, e se não for sua praia programar tem o tráfego pago que é basicamente fazer entregas de panfletos digitalmente, ou seja, imagine a atividade de entregador de panfletos para levar os clientes até uma determinada loja, agora imagine que ao invés de ficar no semáforo ou andando pelas ruas entregando você saiba onde exatamente elas vão estar, consiga filtrar por idade, gênero e muito mais, assim filtrando ao máximo o seu público alvo para não entregar panfletos para quem não vai comprar seu produto, seria bom né, então isso é o tráfego pago, nada mais do que digitalizar uma atividade totalmente física.

Voltando a programação temos o cenário bem dividido, tendo os frontend e os backend, as tecnologias mais populares e de fácil aprendizado são Javascript e Python, onde as duas podem criar coisas extraordinárias. Se imagine criando sites, lojas online e aplicativos, vejam que essas linguagens são o começo dessa jornada que você pode trilhar.

Tá legal, mas onde posso estudar isso tudo, temos muitos caminhos, grátis e pagos no mercado, e no youtube podemos estudar totalmente gratuitamente com vários instrutores e ter noção dos próximos passos, mas não tem bala de pratas para estudo, pesquise, consuma o máximo de conteúdo gratuito antes de fechar algo pago, para assim ter mais embasamento se o curso é bom ou não.

A RocketSeat tem um dos melhores cursos que já vi, olha que tenho mais de 5 anos de experiência como professor e com isso aprendi ser muito crítico quando se refere à educação. Eles fazem em tempos em tempos uma semana do zero ao seu primeiro site ou aplicativo e com isso você já aprende mesmo fazer uma aplicação, e se gostar do método de ensino pode fechar o curso completo deles que é melhor ainda, com isso posso dizer com toda certeza que em 2 ou 3 meses você vai conseguir fazer o curso deles. E sem dúvida já vai conseguir se candidatar para vagas de programador ou desenvolvedor estagiário ou até mesmo junior.

Mas Robson e no caso de seguir para o tráfego pago, onde devo estudar? Hoje temos uma das maiores referências no mercado fazendo conteúdos gratuitos no mesmo formato que a RocketSeat, uma semana do zero para te mostrar como seguir no caminho certo e também ao fim eles oferecem um curso top que te levará ao próximo nível e essa referência é o Pedro Sobral, ele é o cara de tráfego pago no brasil e com certeza ele vai conseguir te ajudar.

Então para deixar em passos:

Escolha entre programação ou tráfego pago.
Estude gratuitamente para ter ideia se é o que procura.
Faça um dos cursos indicados acima e se dedique.
Foque nisso por 2 ou 3 meses consumindo mesmo tudo isso e aplicando.
Crie um linkedin e coloque seu currículo destacando o que está estudando e onde.
Agora só se candidatar a várias vagas entre estagiário e desenvolvedor junior e ir ouvindo os feedbacks dos recrutadores para melhorar nas entrevistas.

Lembram-se que isso não é uma receita de bolo, e vai funcionar mais alguns e outros não, pois somos indivíduos únicos, mas na maioria dos casos esse caminho vai funcionar, e se não funcionar, tente não desanimar e repense onde poderia melhorar e tente novamente. Vale ressaltar também que o tempo de 2 a 3 meses é algo que difere de acordo com as pessoas, mas no geral em 6 meses no máximo tende a ser o suficiente.

Me siga para mais dicas e caminhos, estou sempre a disposição para te levar ao próximo nível.
robsonneres2009

Sigam os perfis no instagram que comentei:
rocketseat_oficial
sobralpedro_

Testing Library React em 4 minutos...

Robson Neres — Wed, 10 Mar 2021 23:40:32 +0000

Para começar vamos entender o que é o Testing Library. Bom para simplificar é uma biblioteca voltada para testes unitários de aplicações frontend.
Link da biblioteca: https://testing-library.com/

Show!
Agora vamos começar pois temos 4 minutos...rs

1) Primeiro passo é ter um projeto react, então vamos criar um básico.

Separe uma pasta onde vamos criar nosso projeto
Abra o terminal nessa pasta e digite o comando abaixo
npx create-react-app my-app (my-app é o nome do seu projeto)
Abra a pasta gerada pelo comando no terminal com: cd my-app
Rode o projeto digitando o seguinte comando no terminal: npm run start

2) Bom demais, nesses comando conseguimos ter um projeto react rodando e ainda já deixar instalado a biblioteca testing-library. Caso queira instalar em algum projeto existente basta fazer os passos abaixo:

npm install --save-dev @testing-library/react

OBS: com --save deixamos documentado no package.json o que instalamos para quem clonar nosso repositório conseguir rodar sem problemas, o -dev é por que utilizamos essa lib(biblioteca) somente para testar em ambiente de desenvolvimento e não queremos que afete o pacote gerado para deploy em produção! ;-)

3) Agora vamos fazer nosso primeiro teste:

Crie um arquivo no seu projeto no mesmo lugar que estiver o arquivo que deseja testar com o nome do component/arquivo, ex: button.test.jsx

OBS: Usamos .test quando é um arquivo de testes completos dos comportamento do componente e vamos fazer um regressivo mesmo. E quando queremos apenas fazer uma documentação/especificação do componente usamos .spec, ou seja, fazemos um arquivo desses quando queremos testar apenas o básico e seguindo muitas vezes as premissas que fizeram criar o componente.

Então vamos mostrar nosso componente e estudar o que pode ser testado:

import React from "react";
import PropTypes from "prop-types";
import cs from "classnames";
import './Button.scss';


const Button = ({ kind, gtmCategory, gtmAction, gtmLabel, onClick, className, children, ...otherProps }) => {
    return <button
    onClick={onClick}
    {...otherProps}
    className={cs(`button ${className}`, kind ? `button--${kind}` : null)}
    data-gtm-event-category={gtmCategory}
    data-gtm-event-action={gtmAction}
    data-gtm-event-label={gtmLabel}
    >
        {children}
    </button>
};

Button.propTypes = {
    onClick: PropTypes.func,
    children: PropTypes.any,
    kind: PropTypes.any,
    gtmCategory: PropTypes.any,
    gtmAction: PropTypes.any,
    gtmLabel: PropTypes.any,
    otherProps: PropTypes.any
};

export default Button;

Então vamos para nosso teste:

import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import Button from './Button';

test('render button', () => {
    const { getByText } = render(<Button>TESTE 1</Button>);
    const linkElement = getByText('TESTE 1');
    expect(linkElement).toBeInTheDocument();
});

test('render button with kind', () => {
    const { getByText } = render(<Button kind="disabled">TESTE 2</Button>);
    const linkElement = getByText('TESTE 2');
    expect(linkElement).toBeInTheDocument();
});

Algumas explicações sobre nossos testes:
Fizemos primeiro um render básico do nosso componente passando nenhuma props. Nesse teste dizemos o render do componente na linha 6, utilizando uma das facilidades da lib testing-library pois ela permite pesquisar no código renderizado um text especifico, que no nosso caso foi o título do botão.
Então para testar mesmo nosso primeiro render esperamos que encontrasse nosso titulo do botão na tela renderizada, utilizando o expect, na linha 8. Nesse caso o expect é uma das ferramentas do próprio Jest(lib que cuida dos testes).
No segundo teste fizemos uso de uma variação de layout que nosso componente permitia, passando uma props a mais e vendo se conseguimos pegar mesmo assim o título do mesmo.
Agora se perguntarmos se esses testes estão cobrindo todo nosso componente o que você diria? Se você disse não então prestou atenção no nosso código e viu que temos também uma ação no nosso botão e não passamos por ela, abaixo vamos escrever esse teste juntos:

import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import Button from './Button';

test('render button', () => {
    const { getByText } = render(<Button>TESTE 1</Button>);
    const linkElement = getByText('TESTE 1');
    expect(linkElement).toBeInTheDocument();
});

test('render button with kind', () => {
    const { getByText } = render(<Button kind="disabled">TESTE 2</Button>);
    const linkElement = getByText('TESTE 2');
    expect(linkElement).toBeInTheDocument();
});

test('render and click button', () => {
    const mockFunction = jest.fn();
    const { getByText } = render(
        <Button kind="disabled" onClick={()=>mockFunction()}>TESTE 2</Button>
    );

    fireEvent.click(getByText('TESTE 2'));
    expect(mockFunction).toBeCalled();
})

Nesse último teste fizemos uma function mocada usando jest.fn() que simula uma function e contabiliza quando é acionada, assim fica fácil de testarmos o que esperamos. Basicamente renderizamos nosso botão, depois usamos o fireEvent para disparar um click no botão e usamos no expect a nossa function mocada que nos informa se foi acionada ou não, e então temos nosso resultado esperado com o toBeCalled, ou seja, essa function foi acionada? simm

Com isso terminamos o básico de um teste de componente, seguindo algumas coisas básicas e muito utilizadas em todos testes...

ahh caso queira ver o quanto que cobrimos nosso componente basta executar esse comando no terminal:
npm run coverage

Então vai ser gerado uma pasta na raiz do seu projeto com o nome coverage e então basta abrir a pasta dentro e abrir no navegador o index.html, ai vai ter uma amostra de coberturas de todos seus componentes e telas. Nesse caso ficou assim o do nosso componente: