--- title: "Mundial 2026: adicione uma secção de calendário e" description: "O Mundial 2026 começou, e os jogos vão captar a atenção de toda a gente: uma oportunidade para fidelizar a sua audiência e, ao mesmo tempo, atrair uma nova, dir" canonical_url: "https://pt.goodbarber.com/blog/mundial-2026-adicione-uma-seccao-de-calendario-e-resultados-a-sua-app-sem-programar-a1278/" lang: pt date: 2026-06-16 last_updated: 2026-07-17 --- # Mundial 2026: adicione uma secção de calendário e [Voltar](/blog/make-it-r19/) # Mundial 2026: adicione uma secção de calendário e resultados à sua app, sem programar Escrito por [Mathieu Poli](https://pt.goodbarber.com/blog/author/mathieu-poli/) na Terça-Feira 16 Junho 2026 ## O Mundial 2026 começou, e os jogos vão captar a atenção de toda a gente: uma oportunidade para fidelizar a sua audiência e, ao mesmo tempo, atrair uma nova, diretamente dentro da sua app. Veja como adicionar uma secção de calendário e resultados — o marcador de cada jogo, próximo jogo em destaque, hora de início no fuso horário local — partindo de um simples prompt, graças ao AI Extension Builder da GoodBarber. ## O Mundial joga-se noutro lado que não a sua app ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96996244-67594875.jpg?v=1781600722.7284024) De 11 de junho a 19 de julho de 2026, 48 equipas e dezenas de jogos vão marcar o ritmo de seis semanas de atenção mundial. Entretanto, a sua comunidade acompanha os scores noutras cinco aplicações. Nenhuma com o seu nome. Uma secção de calendário e resultados: exatamente o tipo de página que, ainda ontem, exigia um programador. Hoje, descreve-a, e ela constrói-se. Eis como. ## O que vai obter ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96996244-67594876.jpg?v=1781600724.3684106) Uma única página, que se desloca: - **Os jogos já disputados primeiro, os jogos por vir a seguir.** Ao abrir, a página posiciona-se diretamente no próximo jogo: o último resultado mesmo por cima, o que vem a seguir mesmo por baixo. - **Agrupados por dia**, com um título de data bem legível. - **Resultado final** para os jogos terminados, **hora de início no fuso horário local do visitante** para os jogos por vir. - Um **cartão arredondado** por jogo, com as duas equipas e respetivas bandeiras, e um destaque discreto para o próximo jogo. - Um design **sporty, mobile-first**. E, sobretudo: **dados reais, nunca inventados.** Durante o carregamento, placeholders; em caso de falha, uma mensagem clara com um botão «Tentar de novo» — sem scores falsos. Duas formas de lá chegar. ## Método 1 — A via rápida: um clique na biblioteca de exemplos Ideal para obter um resultado depressa. 1. No seu back-office GoodBarber, adicione uma secção e escolha **«Criar com IA»** (o AI Extension Builder). 2. Abra a **biblioteca de exemplos**. 3. Selecione o exemplo **«Mundial 2026 — Calendário & Resultados»**. 4. O assistente gera o código e **mostra o resultado ao vivo**, no contexto da sua app. Sem configuração, sem API para ligar, sem uma única linha de código. O exemplo já traz o prompt certo — aquele que dissecamos já a seguir. Pode mantê-lo tal como está, ou ajustá-lo às cores da sua app. É o cenário «um clique»: a secção existe em menos de um minuto. Mas perceber *como* o exemplo está escrito é o que lhe permitirá, depois, criar outros — para o seu campeonato nacional, a sua liga local, ou os jogos só do seu clube. ## Método 2 — A via à medida: a anatomia do prompt Eis o prompt exato que se esconde por trás do exemplo. Cabe em poucas linhas, e cada linha tem uma razão de ser. Cria uma página limpa e moderna que mostra todos os jogos do Campeonato do Mundo FIFA 2026 numa única lista de deslocamento simples — primeiro os jogos já disputados, depois os que estão para vir. Quando a página abrir, desloca-te diretamente até ao próximo jogo, para que as pessoas vejam os resultados mais recentes logo acima e o que vem a seguir abaixo. Agrupa os jogos por dia com um cabeçalho de data bem legível. Para os jogos terminados mostra o resultado final; para os jogos por vir mostra a hora do pontapé de saída no fuso horário local do visitante. Assinala um jogo que esteja a decorrer neste momento com uma pequena etiqueta vermelha «LIVE». Dá a cada jogo o seu próprio cartão com cantos arredondados, com as duas equipas e as suas bandeiras, e destaca subtilmente o próximo jogo. Usa dados reais e atualizados — nunca inventes resultados nem jogos. Obtém-nos a partir deste link exato, e usa-o tal como está, sem o alterar: https://site.api.espn.com/apis/site/v2/sports/soccer/fifa.world/scoreboard?dates=20260611-20260719&limit;=950 Alguns dos jogos mais adiante no quadro ainda não têm as equipas definidas (vais ver etiquetas como «Group A Winner») — mostra-os simplesmente sem bandeira, e garante que um jogo invulgar nunca quebra o resto da lista. Enquanto os dados carregam, mostra indicadores de carregamento, e se não for possível carregá-los, mostra uma mensagem simpática com um botão «Tentar novamente» em vez de quaisquer dados falsos. Torna-a desportiva e pensada primeiro para o telemóvel, com cartões arredondados, um toque de verde e um cabeçalho fixo. Todo o texto em português. O que torna este prompt fiável são cinco reflexos simples. São esses que importa reter, muito mais do que este caso concreto. **1. Descrever o resultado, não o código.** Nunca dizemos ao assistente *como* fazer. Dizemos-lhe o que o utilizador deve ver: uma lista que se desloca, os jogos disputados primeiro, a abertura focada no próximo jogo. Você descreve uma experiência; o assistente escreve o código. **2. Apontar para uma fonte de dados real — e respeitá-la.** O prompt dá um link de dados ao vivo e uma instrução inegociável: `Usa dados reais e atualizados — nunca inventes resultados nem jogos`, `usa-o tal como está`. É o garante anti-alucinação. A cada abertura, a página lê a fonte real; nunca inventa um score. (Para outro evento, é esta linha que muda: o seu campeonato, a sua liga, o seu clube.) **3. Antecipar os casos particulares.** Em 2026, muitos jogos das fases finais ainda não têm equipas atribuídas — vai ver passar rótulos do tipo «Group A Winner». O prompt já o previu: mostrar esses jogos sem bandeira e, sobretudo, *que um jogo invulgar nunca parta o resto da lista*. Um único dado defeituoso não pode deitar abaixo a página inteira. **4. Cuidar dos estados vazios e dos erros.** Durante o carregamento: placeholders. Em caso de falha: uma mensagem clara e um botão «Tentar de novo». Nunca dados falsos para tapar um buraco. É isto que separa uma secção a sério de uma demo que falha em plena reunião. **5. Enquadrar o estilo numa frase.** Mobile-first, cartões arredondados. O assistente precisa de uma direção artística curta e nítida, não de um caderno de encargos. Estes cinco reflexos não valem só para o futebol. Reaproveite-os para um calendário de eventos, uma lista de produtos, um quadro de scores interno: é a mesma gramática de prompt. ## Porque é que funciona mesmo na GoodBarber Gerar código com uma IA, muitas ferramentas o fazem. A diferença está em *onde aterra esse código*. Aqui, o assistente não escreve no vazio. A secção gerada integra-se diretamente na sua app: o alojamento está incluído, adota o sistema Smart Design da sua aplicação e fica embutida na sua app — em iOS, Android e PWA — sendo depois distribuída nas stores como tudo o resto. O resultado não é um bocado de código para copiar e colar: é uma secção viva dentro de uma app a sério. E isto é só o começo: uma secção construída assim **pode também recorrer às capacidades da plataforma** — geolocalização, conteúdo, notificações push, etc. O nosso exemplo dispensa-as — lê diretamente a sua fonte de scores —, mas pode construir páginas que vão muito mais longe na integração com a sua app. É isto que explica também a promessa de sempre da GoodBarber — apps profissionais sem escrever uma linha de código, desde 2011, com hoje um download a cada 4 segundos em 152 países. O AI Extension Builder prolonga esta lógica: quando uma funcionalidade falta no catálogo de mais de 190 extensões, deixa de depender de um programador — descreve-a, e ela acrescenta-se à sua app. ## Mãos à obra O Mundial 2026 dura seis semanas. A janela de atenção, essa, está aberta agora. Abra o **AI Extension Builder** no seu back-office (ou comece um teste gratuito), escolha o exemplo «Mundial 2026» na biblioteca e publique a sua secção de calendário e resultados antes do próximo apito inicial. Depois reutilize os cinco reflexos do prompt para a próxima funcionalidade que faltar à sua app. ## Em resumo (FAQ) **Os resultados estão atualizados?** A cada abertura da página, a secção lê uma fonte de dados ao vivo. Os scores e os horários apresentados são os devolvidos por essa fonte — nunca dados inventados. **É preciso saber programar?** Não. Descreve a secção em linguagem natural; o assistente gera o código e mostra-o ao vivo. Depois pode afinar o prompt, ou editar o código diretamente se quiser. **Posso adaptá-la a outro evento ou ao meu campeonato?** Sim. A estrutura do prompt é reutilizável: mude a fonte de dados e o estilo para cobrir outra competição, uma liga local ou apenas os jogos do seu clube. ![Mathieu Poli](https://blog.goodbarber.com/_public/profile/65/6553d00ecdbe15f8aac2da7dddcff47648fdd791-default.jpg) Sobre o autor[Mathieu Poli](https://pt.goodbarber.com/blog/author/mathieu-poli/)Head of Frontend Engineering Sou Head of Frontend Engineering na GoodBarber Supervisiono as equipas que concebem os motores de renderização no coração da nossa plataforma no-code: são elas que dão vida aos projetos dos nossos utilizadores e os transformam em aplicações nativas, fluidas e cuidadas. Tudo o que se vê e se manipula no ecrã passa pelas suas mãos. Pioneiro do no-code móvel, apaixonado por arquitetura de software e design de produto, também dou aulas em universidades e escolas privadas. Aqui escrevo sobre engenharia frontend, design de produto e IA — e sobre tudo o que acontece quando estes três mundos se encontram. [Saiba mais](https://pt.goodbarber.com/blog/author/mathieu-poli/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/hellomathieup)[![X](https://portal.ww-cdn.com/portal_static/svg/base2021/x.820492c586dd.svg)](https://x.com/hellomathieup/)