Como fazer qualquer pessoa entender o que é uma API.

Uítalo Souza — Wed, 30 Aug 2023 20:17:02 +0000

Um conceito bastante difundido no ramo do desenvolvimento web há um bom tempo são os das API’s (Application Programming Interface). Segundo a documentação do MDN, pode-se entender como um conjunto de características e regras em uma aplicação que possibilitam interações com a mesma através de um software, ou seja, esse recurso faz com que aplicações com responsabilidades completamente diferentes possam conversar e trocar informações mediante características e regras desse elemento.

Um exemplo excelente é um presente na documentação da AWS sobre o assunto. Um celular conversa a todo momento com softwares de medição de dados meteorológicos via API’s para poder atualizar a tela dos celulares com as informações de temperatura, previsão de chuva, velocidade de ventos e possibilidades até de alertas de situações de possíveis riscos às pessoas. Os smartphones não precisam ter um sensor que capte tudo isso nem precisa saber como obter as informações meteorológicas. Ele precisa de um intermediador, para quem ele possa solicitar as informações que precisa, seguindo determinadas características e obedecendo regras, para assim receber as informações e, se tudo estiver conforme solicitado, exibi-las em tela.

Se observarmos direito, uma API funciona tal qual um garçom de um restaurante, onde fazemos o pedido e ele anota tudo que estamos pedindo e as demais observações. Aqui, a cozinha funciona como se fosse um servidor, que recebe o pedido através do garçom e o prepara. Assim que estiver pronto o garçom coleta o que foi preparado e entrega o prato ao cliente. É possível notar uma clara semelhança ao exemplo do celular buscando dados do servidor meteorológico. O cliente não precisa falar diretamente para a cozinha o seu pedido e como o quer, nem precisa saber como vai ser feito. Precisa apenas passar o que deseja ao garçom e esperar receber o seu prato.

Imagem disponível em: https://ecdisis.com/que-es-rest-api/

API’s estão presentes, em larga escala, em todo o universo web. Tudo o que fazemos no dia-a-dia que necessite de comunicação com servidores, seja ver um episódio de série em um streaming, consultar uma plataforma de estudo, olhar determinada notícia em um portal, fazer um pagamento de algo que você está comprando, e até o que a não fazemos diretamente, como receber informações meteorológicas no celular, passam por API’s.

Nos conceitos e nos exemplos foi dito que as API’s seguem características e obedecem regras. Abordarei mais sobre esse tópico nos próximos artigos. Um abraço!!

Animando elementos ao rolar a página com o scrollReveal

Uítalo Souza — Wed, 09 Feb 2022 15:42:15 +0000

Durante a criação de uma landing page em um projeto freelancer que estou desenvolvendo, decidi colocar algumas animações no site, para prover à quem acessar a página uma interação mais agradável do que simplesmente exibir o conteúdo das sessões de forma bruta. Com essa ideia em mente, comecei a pensar em formas de criar essas animações primeiramente em CSS. Estudei sobre keyframes, transition, transform e cheguei em um resultado que não me agradou, pois eu queria que as animações acontecessem ao chegar em uma determinada sessão.

Ao fazer uma pesquisa sobre ferramentas que me fornecessem o resultado que em queria, cheguei na ferramenta que é título deste artigo, o scrollReveal. Assim que entrei no site de apresentação da biblioteca, vi que era exatamente o que eu queria. Uma forma de exibir conteudos na página, de forma independente, assim que eu chegasse na sessão específica.

Me surpreendi com a facilidade de usar os recursos do ScrollReveal, é possível adicionar a biblioteca a partir do gerenciador de pacotes npm ou simplesmente referenciando o arquivo da biblioteca nos scripts do seu projeto.

npm install scrollreveal --save
ou
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>

No código javascript do projeto, ao atribuir uma constante ao ScrollReveal conforme mostrado abaixo. Pode-se definir como chave e valor, os atributos que deseja ter por padrão na animação, no meu exemplo, estou colocando somente o reset como true, com isso, ao passar na sessão, após ela sair do campo de tela, ela fará a animação novamente.

const sr = ScrollReveal({reset: true})

Agora, para cada item que eu quiser animar, eu passo a minha constante chamando a função reveal, passando por parâmetro o que eu quero colocar a animação identificando, seja como id, classe, tag, etc. E passando as animações que eu quero que aquele bloco execute, também como chave e valor.

sr.reveal(".toDown", {
    origin: "top", //Para ele surgir de cima para baixo.
    distance: "50px", // A distancia do origin para a posição original do elemento.
    duration: 2000, // A duração da animação em ms
    delay: 300, // O delay para a animação acontecer
    reset: false // Ao sair do campo de tela, a animação não acontecerá novamente caso eu passe por ela novamente.
  });

No exemplo acima, estou animando uma div que tem uma classe chamada “toDown”, passando como alguns parâmetros que estão detalhados. Há outros, como o rotate, viewFactor, easing, interval, entre outros.

Com essa ferramenta sensacional e bastante fácil e intuitiva de usar, eu consegui executar tudo o que eu tinha pensado para o projeto e surpreender positivamente o meu cliente e as pessoas que usarão o seu site.

Aqui embaixo estão a página da biblioteca, o seu repositório no github e um exemplo no codepen para ver o funcionamento e testar o que essa ferramenta pode fazer.

Documentação
Repositório da biblioteca
Codepen para teste

DEV Community: Uítalo Souza

Como fazer qualquer pessoa entender o que é uma API.

Animando elementos ao rolar a página com o scrollReveal