Coleção de IAs do Código e Conteúdo

Coleção de IAs do Código e Conteúdo

Sua coleção organizada das melhores ferramentas de Inteligência Artificial!

Saiba Mais Sobre o Projeto.

Link do Site.

Tutorial: Catálogo Dinâmico de Ferramentas de IA

Crie um catálogo interativo e profissional de ferramentas de inteligência artificial, com busca inteligente, filtros por categoria, atualização simplificada e hospedagem gratuita pelo GitHub Pages. Uma solução elegante usando apenas HTML, JSON e JavaScript.

Ferramentas Necessárias

Arquivo JSON

Banco de dados estruturado
contendo todas as informações
sobre as ferramentas de IA

Arquivo HTML

Interface do site com estrutura,
estilo e funcionalidades
interativas

Conta GitHub

Plataforma gratuita para hospedar e publicar seu catálogo online

Estrutura de Dados: Campos Essenciais

Planeje cuidadosamente os campos que cada ferramenta de IA terá no seu catálogo. Uma estrutura bem definida facilita a manutenção e busca.

key

Identificador único e curto

nome

Nome da ferramenta

categoria

Tipo ou classificação

atributo

Característica principal

descricao

Explicação detalhada

link

URL de acesso

Criando o Arquivo ia-data.json

Este arquivo JSON será o coração do seu catálogo, armazenando todas as informações de forma estruturada e fácil de atualizar.

[
{
"key": "chatgpt",
"nome": "ChatGPT",
"categoria": "LLMs",
"atributo": "Conversacional",
"descricao": "Modelo OpenAI para várias automações.",
"link": "https://chat.openai.com"
},
{
"key": "midjourney",
"nome": "Midjourney",
"categoria": "Imagens",
"atributo": "Criativo",
"descricao": "Gerador de imagens artísticas por IA.",
"link": "https://midjourney.com"
}
]

Componentes do Arquivo index.html

Estrutura HTML

Doctype, head com meta tags, e body com containers principais

Campo de Busca

Input text para pesquisar ferramentas por nome ou descrição

Botões de Filtro

Controles para filtrar IAs por categoria específica

Área de Listagem

Container dinâmico onde os cards das IAs serão renderizados

Dica importante: O visual pode começar simples! Foque primeiro na funcionalidade, o estilo pode ser aprimorado depois
com CSS.

Programando a Interatividade

Lógica JavaScript Principal

Fetch dos Dados

Carrega o arquivo JSON com todas as IAs

Renderização

Cria cards dinamicamente na tela

Filtros

Implementa busca e filtros por categoria

A mágica acontece no bloco <script>, onde o JavaScript
transforma os dados JSON em uma interface interativa e
responsiva.

Exemplo de Código:

Renderização

fetch('ia-data.json')
.then(response => response.json())
.then(ias => {
const container = document.getElementById('ia-list');

ias.forEach(ia => {
const card = document.createElement('div');
card.className = 'ia-card';
card.innerHTML = `
<h3>${ia.nome}</h3>
<p>${ia.descricao}</p>
<a href="${ia.link}" target="_blank">Acessar</a>
`;
container.appendChild(card);
});
});

Use JavaScript para montar os cards dinamicamente e atualizar a interface quando o usuário utilizar busca ou filtros. A manipulação do DOM permite criar uma experiência fluida e responsiva.

Testando Localmente

Validação Antes da Publicação

Execute um servidor local para testar o catálogo no seu computador antes de
publicar online.

Servidor Python

No terminal, execute: python -
m http.server

Teste Funcionalidades

Busca por nome, filtros de
categoria, modal de detalhes

Valide Responsividade

Teste em diferentes tamanhos de tela

Publicação Gratuita no GitHub Pages

Crie o Repositório

No GitHub, clique em "New repository" e escolha um nome descritivo
para seu catálogo

Upload dos Arquivos

Faça upload do index.html e ia-data.json para o repositório
criado

Configure o Pages

Vá em Settings ³ Pages ³ Branch: main/root e salve as
configurações

Site no Ar!

Acesse em https://SEU-USUARIO.github.io/NOME-REPO/

Atualizações Simplificadas

Edite o JSON

Adicione, remova ou modifique ferramentas diretamente
no arquivo ia-data.json

Commit no GitHub

Faça upload da nova versão para o repositório

Atualização Automática

O site atualiza automaticamente, SEM precisar mexer no
HTML!

A separação entre dados e apresentação torna a manutenção
extremamente eficiente.