Gosto muito das aventuras de Ricky And Morty e melhor ainda foi poder brincar com a <a href='https://rickandmortyapi.com' target='_blank' rel='noopener noreferrer'>api</a> deles. Trata-se de um retorno de dados de todos os personagens da série.Nessa pequena aplicação, faço uma listagem de cards de todos os personagens com uma paginação. Ao clicar no card, abre os detalhes do personagem em si, onde é possível acessar um accordion que lista todos os episódios e temporadas em que o personagem aparece se o mesmo de fato tiver muitas aparições.Vale lembrar que: Para quem ainda estiver assistindo a série, é possível que a api dê algum spoiler na lista de acontecimentos do mesmo personagem, cuidado! haha.Acesse o <a href='https://rickandmortyapicasestudy.netlify.app' target='_blank' rel='noopener noreferrer'>aqui</a> o link para vê-lo em ação.<h2>O que é uma API (Application Programing Interface)</h2>É basicamente uma estrutura de dados que disponibiliza de forma fácil, rápida e segura qualquer conteúdo web. Isso torna a vida do desenvolvedor muito mais fácil, já que é possível utilizar a mesma base de dados para uso tanto em sites quanto em aplicativos híbridos, como Ionic por exemplo. Dessa forma, independente da plataforma em que o usuário estiver utilizando, o mesmo conteúdo será mostrado.Alguns outros exemplos de API's famosas a serem listadas são: <a href='https://developer.marvel.com' target='_blank' rel='noopener noreferrer'>Marvel API</a>, <a href='https://pokeapi.co/' target='_blank' rel='noopener noreferrer'>Poke API</a>.<h2>Ferramentas de desenvolvimento</h2>Utilizei ReactJS, uma biblioteca de componentes criada pelo Facebook (atual Meta Platforms, Inc.), cujo objetivo primário era melhorar a performance da rede social, no entanto, tornou-se tão famosa entre os desenvolvedores que acabou se tornando um ótimo modelo de desenvolvimento de aplicações web. Hoje é utilizado tanto para websites quanto para apps (React Native).Como é uma estrutura simples, não precisei desenhar de fato nada, ao invés montei todo o visual direto no código, utilizando <a href='https://styled-components.com' target='_blank' rel='noopener noreferrer'>Styled Components</a>, uma biblioteca que combina Javascript e CSS, usando uma técnica chamada CSS-in-JS. Nela é possível escrever funções, exportá-las e reutiliza-las se necessário de forma rápida e prática, tornando o CSS muito mais dinâmico.

I like a lot Rick And Morty adventures and better than this it was playing with their <a href='https://rickandmortyapi.com' target='_blank' rel='noopener noreferrer'>api</a>. It's about data returning of the serie's character.In this small application, I do a cards list of all characters with a pagination. By clicking on a card, it open the character details, where is possible to access an accordion that list all of the episodes as well as the seasons in which the character has been appeared if the same one in fact has many apparitions.Just a reminder: For those who still watching the serie, it's possible that the api give it some spoiler in the list of events of the same character, look out! haha.Access o <a href='https://rickandmortyapicasestudy.netlify.app' target='_blank' rel='noopener noreferrer'>here</a> the link to see it in action.<h2>What is an API (Application Programing Interface)</h2>It's basically a data structure that provides in a easy, fast and secure way any web content. This turns out easier the developer's life, cuz is possible to use the same base structure, whatever is sites or hybrid apps, like Ionic for instance. Hence, regardless the platform in which the user is using, the same content will be shown.Some other API examples to be listed are: <a href='https://developer.marvel.com' target='_blank' rel='noopener noreferrer'>Marvel API</a>, <a href='https://pokeapi.co/' target='_blank' rel='noopener noreferrer'>Poke API</a>.<h2>Development tools</h2>I've used ReactJS, a components library created by Facebook (current Meta Platforms, Inc.), in which first goal it was to improve the social network's performance, however, it became so famous among developers that turns out a great development model of web applications. Today is used to websites as well as apps (React Native).As a simple structure, I did not draw anything, instead I've built all the visual right in the code, using <a href='https://styled-components.com' target='_blank' rel='noopener noreferrer'>Styled Components</a>, a library that combine Javascript and CSS, using a technique called CSS-in-JS. In it, it's possible to write functions, export them and re-use them if necessary in a straightforward way, turning out CSS much more dynamic.

Este foi um exercício que gostei muito de fazer. Caso de estudo da API Ricky and Morty.

This one it was an excercise that I liked a lot doing. Study case of Ricky and Morty API.

jobs

Rick and Morty API

other jobs

App - Insurance company Bradesco Seguros Celular

Volvo - Atlas of Accidents in Brazilian Transport

Volvo - Voam Dentistry and Medical Assistance

Guandalini Sampaio Lawyers