[AJUDA] Como consumir uma API? (Cartola FC)

Olá pessoal!

Estou criando um projeto para aperfeiçoar meus conhecimentos em design e desenvolvimento com webflow. Como gosto de muito de futebol, escolhi um projeto sobre o Cartola FC para construir.

Minha dúvida é: como faço para pegar os dados e apresentá-los na tela?

Minha ideia é contruir algo nesse setido (uma mistura desses dois sites):

Um local onde eu possa ver:

  1. o preço do jogador, pontuação mínima para valorizar, pontuação cedida, média, etc
  2. Jogos, horários, estatísticas dos confrontos, etc...

A parte de criar o design, desenvolver o site eu consigo! O que eu não tenho uma ideia tão clara de como fazer é mostrar estes dados na tela...

Alguem já contruiu algo parecido e/ou pode me dar uma luz de qual caminho devo seguir para construir esse projeto? (gostaria de construí-lo antes do Cartola FC começar, dentro de pouco menos de 1 mês)

Segue alguns links que encontrei no github que podem ser úteis: https://github.com/atilacamurca/agregador-fc https://github.com/henriquepgomide/caRtola https://github.com/giovanigenerali/cartrolandofc/blob/master/nova-api.md

Gustavo, tudo bem, você conseguiu trabalhar com os dados do cartola, eu também tenho interesse de fazer um site que analise a parte estatística do cartola agora em 2023, fico grato se puder agora me ajudar, meu e-mail é mtleiria@gmail.com.

Olá, Marcio! Cara, eu deixei esse projeto para um outro momento. Não segui com ele! (as únicas coisas que eu consegui foram as que postei por aqui... não tive muita evolução).

Olá tudo bem Gustavo? Me chame no Whatsapp por favor 38 9 9928 1475

Se você tiver as APIs ficarei feliz em te ajudar... 🤝

Não são estas? https://github.com/giovanigenerali/cartrolandofc/blob/master/nova-api.md (apesar da data que consta no github, elas estão "atualizadas")
Desculpa meu amigo nao percebi que estavam ali, vou dar uma...

Opa Gustavo beleza? Primeiramente parabéns, pelo que você descreveu já está seguindo o seu caminho como dev frontend. Bom agora está na hora de comunicar esse front com um back através de uma WebAPI. Pelo que vi nos links que você deixou no github eles ja têm ai os endpoints tudo bonitinho para você consumir, o próximo passo que eu te recomendaria era baixar o Insomnia, é uma ferramenta muito top para testar WebAPIs, nele você pode testar as requisições e as respostas possíveis que vai receber. Depois disso você tem que procurar pela fetch api é uma função muito massa do javascript que vai te permitir fazer requisição HTTP direto do seu js. Depois disso basta tratar o resultado e renderizar os dados na tela.

tem um video muito massa que pode te ajudar, é um projetinho de pokedex que sepre recomendo pros inciantes que estão nesse nível que você descreveu: https://youtu.be/SjtdH3dWLa8 https://youtu.be/SjtdH3dWLa8

Vou assistir. Obrigado!
Por essas e outras que amo essa comunidade. Sou iniciante e escolhi o caminho de ser Backend, sigo aprendendo Java para isso. Nem sempre entendo completamente o que vejo por aqui, mas já entendo mais do que antes e no fim das contas aprendo termos novos que viram objeto de estudo. Estou nessa há 6 meses, agradeço muito a todos que colaboram, sejam com dúvidas ou respostas a elas. Sucesso a todos. Abraço.
Realmente essa comunidade é incrível!
Uma dúvida, nesse caso se existir token de acesso na API e utilizar um servidor que não possui o node, como faz para guardar esse token sem que outras pessoas possam encontrar e utilizar?
Opa tudo bem? bom não sei entendi direito a sua dúvida mas basicamente seria assim: ### Como funciona a comunicação? De forma bem, mais bem resumida, quando temos dois ou mais serviços que precisam se comunicar entre si podemos utilizar várias alternativas: **HTTP**, **WebSockets**, **gRPC** e etc... No caso aqui desta postagem estamos falando exclusivamente de uma WebAPI por cima do protocolo **HTTP**. Sendo assim a comunicação é feita idependente de liguagem/framework/OS/Dispositivo pois deste que haja um suporte a **HTTP** você vai conseguir fazerem as duas aplicações conversarem. ### Autentificação entre cliente e servidor(WebApi) Quando falamos de autentificação/autorização também existem diferentes estratégias que vão desde **Certificados** até **Tokens**. Mas basicamente todas vão funcionar na seguinte maneira: 1. Cliente faz uma requisição para obter sua "chave de acesso" 2. Servidor valida essa requisição e responde com a "chave" 3. Cliente utiliza-se dessa chave nas demais requisições para ter acesso a **endpoints** protegidos. Uma das estratégias mais utilizadas é do [**JWT**](https://jwt.io/introduction), depois dá uma pesquisada melhor para entender como funciona. Quando eu digo *Cliente* me refiro a não só aplicações **frontend** mas sim qualquer processo que vai **Consumir** a **WebAPI**, deste modo um cliente pode ser: app react, mobile, uma cli ou até mesmo outra **WebApi** (GraphQl é muito utilizado nesses casos). ### Utilização do token pelo cliente: Como citei anteriormente é feito uma especie de *Handshake* para conseguir um **token de acesso**, e como o mesmo vai ser tratado vai depender muito de qual estratégia está sendo utilizada. Vou novamente tomar como base o **JWT**. Após obter um **token JWT** é de responsabilidade do cliente armazenar ele de forma segura e para isso também tem várias formas dependendo do tipo de cliente: - **Frontend**: Comum armazenar no local/session storage ou até mesmo manter em cookie. - **Mobile**: Assim como um frontend tem um local mais "seguro" para guardar o token. - **Api/Servidor**: Este pode utilizar de vários métodos: **váriaveis de ambiente**, **serviço de cache**, **Banco de dados** e etc... Neste aqui é mais fácil de manter o token escondido/seguro. **SÓ NÃO DEIXA HARD-CODED NO TEU REPOSITÓRIO/CÓDIGO FONTE**. Com base nisso tudo que falei acho que deu pra entender que **Cliente/Servidor** são idependentes de liguagem, basta seguirem os mesmos protocolos/especificações que as coisas dão certo. No seu caso, se eu entendi direito, não importa se o servidor é **Node**, **Deno**, **AspNet**, **Rust**, **SpringBoot**, **Go** ou sla... todos vão ser da mesma forma. Basta receber o token e ver a melhor estratégia no seu cliente para armazena-lo. De preferencia que este token seja de curta duração, no Máx. umas 8h, outra coisa que seu servidor pode implementar é **CORS** ou alguma coisa para validar o **audience**. Nada vai ser 100% seguro, então melhor ir pelo simples e adicionar camadas a mais como *two-factor* e etc... Do que ficar tentando reinventar a roda, com certeza que sempre vai ter brechas. Ja vi caso de pessoa colocar umas trocentas VPN só pra entrar no intranet e depois no final o servidor ser **Windows Xp** 1900 e pedrinha.
Show de bola!!