Passar para o conteúdo principal

Crie uma tabela de classificação

Use um assistente de IA para criar uma página com as tabelas da sua liga, com um menu para trocar de divisão.

Escrito por Pedro Maia

Uma página de tabela de classificação mostra a classificação de cada divisão da sua liga, com um menu para trocar entre elas. Você pode usá-la sozinha ou colocá-la no seu site ao lado das notícias.

Você não precisa ser desenvolvedor. Um assistente de IA como o ChatGPT ou o Claude pode criar a página para você com as instruções abaixo.

Antes de começar

  • Sua liga precisa do plano Gold com a API ativada. Veja Primeiros passos com a API.

  • Você precisa do ID da sua temporada. O artigo Como a API funciona mostra como encontrá-lo.

  • Ainda não tem uma liga? Teste o prompt primeiro com a liga de demonstração do LeagueRepublic: use o ID de temporada 153020000.

Como usar o prompt

  1. Copie o prompt da caixa cinza abaixo.

  2. Preencha o ID da sua temporada. Substitua [ID-DA-MINHA-TEMPORADA] pelo seu número.

  3. Diga como você quer que fique. Descreva suas cores e estilo, ou anexe uma captura de tela do seu site ou de um design de que você goste. Uma imagem costuma funcionar melhor. Se você não disser nada, a IA vai escolher um design simples.

  4. Cole no assistente de IA e envie.

  5. Abra o arquivo que ele entregar. Salve o arquivo e clique duas vezes nele para abri-lo no navegador.

  6. Compare com o site da sua liga. Se algo parecer errado, diga à IA com palavras simples, por exemplo "está faltando a coluna de pontos". Ela vai corrigir.

O prompt

Antes de começar, leia a especificação da API JSON do LeagueRepublic em https://docs.api.leaguerepublic.com/leaguerepublic-read-api.md. Use somente os serviços, endereços web e nomes de campos descritos nela, e siga as regras dela sobre o limite de solicitações, valores vazios, erros e "road" significar visitante. Se você não conseguir abrir esse endereço, pare e me peça para colar a especificação.

Crie para mim uma única página web (um arquivo HTML que eu possa abrir no navegador) que mostre as tabelas da minha liga. O ID da minha temporada é [ID-DA-MINHA-TEMPORADA].

A página deve:

1. Use o serviço Get Fixture Groups For Season para listar as divisões da temporada e mostre-as em um menu. Abra na primeira divisão.

2. Quando eu escolher uma divisão, mostre a tabela dela usando o serviço Get Standings For Fixture Group. Só carregue uma divisão quando eu a escolher.

3. Mostre posição, time, jogos, vitórias, empates, derrotas, gols pró, gols contra, saldo e pontos, além do desempenho recente como pequenos selos coloridos (vitória, empate, derrota).

4. Liste as copas no menu também, mas só verifique se uma copa tem tabelas quando eu a escolher. Se ela for disputada em grupos, mostre uma tabela para cada grupo com o nome do grupo em cima. Se não tiver tabelas, avise.

5. Permita que eu toque em um time para destacar a linha dele.

6. No celular, mantenha posição, time, jogos, saldo e pontos, e esconda as outras colunas.

7. Guarde cada tabela depois de carregá-la e não peça a mesma tabela de novo em menos de um minuto.

Mantenha o design limpo e fácil de ler no celular. Explique em passos simples como abrir e usar o arquivo. Pergunte se algo não estiver claro.

Design: [DESCREVA O VISUAL QUE VOCÊ QUER OU ANEXE UMA CAPTURA DE TELA]

Se algo der errado

  • A tabela de uma divisão está toda zerada. Essa divisão ainda não disputou nenhuma partida. Ela é preenchida assim que os resultados forem lançados.

  • Está faltando uma divisão. Divisões com a tabela oculta no site da sua liga também ficam ocultas aqui.

  • A página mostra uma mensagem de erro. Confira o ID da sua temporada e se a API está ativada para a sua liga.

  • A página não funciona na janela de pré-visualização da IA. Muitas pré-visualizações não conseguem buscar dados de outros sites. Salve o arquivo e abra no seu navegador.

  • A IA diz que não consegue ler a especificação. Abra o endereço da especificação no navegador, selecione tudo, copie e cole na IA.

Todos os detalhes dos serviços usados aqui estão na especificação da API.

Respondeu à sua pergunta?